前端大文件上传 - 分片上传

前端在上传大文件时，一般都会采用分片上传的方式，这样的好处是如果上传过程中断了，下次继续上传的话就不用重新全部上传，只需继续上传未上传的部分即可。

如何实现文件分片上传？

分片上传原理其实就是在客户端将文件分割成多个小的分片，然后再将这些分片一片一片的上传给服务端，服务端拿到所有分片后再将这些分片合并起来还原成原来的文件。

那么第一个问题产生了。服务端怎么知道我合并出来的文件是否和服务端上传的文件完全一样呢？

这就需要用到文件的MD5值了。文件的MD5值就相当于是这个文件的标识，只有当两个文件内容完全一样时，他们的MD5值才会一样。也就是说我们需要先计算出文件的MD5值，并且把这MD5值传递给服务端。为了更好的理解我们来看看分片上传其整个过程是什么样的。

切片：文件该怎么切片？

File对象是特殊类型的 Blob，且可以用在任意的Blob类型的上下文中。就是说能够处理Blob对象的方法也能处理File对象。在Blob的方法里有有一个Slice方法可以帮完成切片。

以下是部分代码 仅供参考

  fileMD5 (files) {
    // 计算文件md5
    return new  Promise((resolve,reject) => {
      const fileReader = new FileReader();
      const piece = Math.ceil(files.size / this.pieceSize);
      const nextPiece = () => {
        let start = currentPieces * this.pieceSize;
        let end = start * this.pieceSize >= files.size ? files.size : start + this.pieceSize;
        fileReader.readAsArrayBuffer(files.slice(start,end));
      };

      let currentPieces = 0;
      fileReader.onload = (event) => {
        let e = window.event || event;
        this.spark.append(e.target.result);
        currentPieces++
        if (currentPieces < piece) {
          nextPiece()
        } else {
          resolve({fileName: files.name, fileMd5: this.spark.end()})
        }
      }
      // fileReader.onerror = (err => { reject(err) })
      nextPiece()
    })
  }

相关文章

阿里云oss分片上传示例