文件分片上传

文件分片上传的流程

1、通过dom获取文件对象，并且对文件进行MD5加密(文件内容+文件标题形式)，采用SparkMD5进行文件加密；
2、进行分片设置，文件File基于Blob, 继承了Blob的功能，可以把File当成Blob的子类，利于Blob的slice方法进行文件分片处理，并且依次进行上传
3、分片文件上传完成后，请求合并接口后端进行文件合并处理

前端

// 分片的逻辑
<script>
 function submitUpload () {
   var chunkSize = 2*1024*1024 //分片大小 2M
   var file = document.getElementById('file').files[0]
   var chunks = [] //保存分片数据
   var token = new Date()
   var name = file.name
   var chunkCount = 0
   var sendChunkCount = 0

   // 拆分文件
   if (file.size < chunkSize) {
      chunks.push(file.slice(0))
   } else {
      var start = 0, end = 0
      while (true) {
        end += chunkSize
        var blob = file.slice(start, end)
        start += chunkSize
        
        if (!blob.size) {
            break;
        }
        chunks.push(blob)
     } 
   }
   chunkCount = chunks.length
   // console.log(chunkCount)
   for (let i = 0; i< chunks.length; i++) {
     var fd = new FormData()
     fd.append('token',token)
     fd.append('f1',chunks[i])
     fd.append('index',i)
     xhrSend(fd, () => {
         sendChunkCount += 1
         if (sendChunkCount === chunks.length) {
             console.log('上传完成，发送合并请求')
             var formD = new FormData()
             formD.append('type','merge')
             formD.append('token',token)
             formD.append('chunkCount', chunkCount)
             formD.append('fileName', name)
             xhrSend(formD)
            }
        })
     }
  }
  // 发送请求
  function xhrSend(fd, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'http://localhost:8085', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        console.log(xhr.responseText);
        cb && cb ()
      }
    }
    xhr.send(fd)
  }
  document.getElementById('btn-submit').addEventListener('click', submitUpload);
script>

后端（node.js实现）

待补充…