大文件分片上传

背景

上传大文件时，以下几个变量会影响我们的用户体验

服务器处理数据的能力
请求超时
网络波动
上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等

为了解决上述问题，我们需要对大文件上传单独处理

分片上传

分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传
如下图

上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件

大致流程如下：

1.将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
2.初始化一个分片上传任务，返回本次分片上传唯一标识；
3.按照一定的策略（串行或并行）发送各个分片数据块；
4.发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件
读取文件内容

const input = document.querySelector('input');
input.addEventListener('change', function() {
    var file = this.files[0];
});

可以使用md5实现文件的唯一性

const md5code = md5(file);

然后开始对文件进行分割

var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.addEventListener("load", function(e) {
    //每10M切割一段,这里只做一个切割演示，实际切割需要循环切割，
    var slice = e.target.result.slice(0, 10*1024*1024);
});

如果想要暂停切片的上传，可以使用XMLHttpRequest的 abort方法(暂停请求)

使用场景

大文件加速上传：当文件大小超过预期大小时，使用分片上传可实现并行上传多个 Part， 以加快上传速度

网络环境较差：建议使用分片上传。当出现上传失败的时候，仅需重传失败的Part

流式上传：可以在需要上传的文件大小还不确定的情况下开始上传。这种场景在视频监控等行业应用中比较常见