是什么

大文件上传时遇到异常情况中断后， 全部重新上传，比较费事费力

• 网络中断
• 网络波动
• 请求超时

解决方法

• 分片上传
• 断点续传

分片上传

• 把大文件按一定规则分割成相同大小的数据块
• 初始化一个分片上传任务，返回本次分片上传的唯一标识
• 按一定策略（串行或并行）发送各个数据块
• 发送完成后，服务端判断是否完整，合并成原始文件， 并返回结果

断点续传

• 询问服务器，获取上传数据块

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

  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);

    const formdata = new FormData();
    formdata.append("0", slice);
    //这里是有一个坑的，部分设备无法获取文件名称，和文件类型，这个在最后给出解决方案
    formdata.append("filename", md5code + file.filename);
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function() {
      //xhr.responseText
    });
    xhr.open("POST", "");
    xhr.send(formdata);
    xhr.addEventListener("progress", updateProgress);
    xhr.upload.addEventListener("progress", updateProgress);

    function updateProgress(event) {
      if (event.lengthComputable) {
        //进度条
      }
    }
  });
});

使用场景

• 大文件
• 网络不稳定
• 流式上传