本文为：多文件断点续传、分片上传、秒传、重试机制 的更新版，若想看初始版本的实现，请查看该文章。

但凡要知其然知其所以然

文件上传置信很多敌人都有遇到过，那或者你也遇到过当上传大文件时，上传工夫较长，且常常失败的困扰，并且失败后，又得从新上传很是烦人。那咱们先理解下失败的起因吧！

据我理解大略有以下起因：

1. 服务器配置:例如在PHP中默认的文件上传大小为8M【post_max_size = 8m】，若你在一个申请体中放入8M以上的内容时，便会出现异常
2. 申请超时：当你设置了接口的超时工夫为10s，那么上传大文件时，一个接口响应工夫超过10s，那么便会被Faild掉。
3. 网络稳定：这个就属于不可控因素，也是较常见的问题。

基于以上起因，聪慧的人们就想到了，将文件拆分多个小文件，顺次上传，不就解决以上1,2问题嘛，这便是分片上传。 网络稳定这个切实不可控，兴许一阵大风刮来，就断网了呢。那这样好了，既然断网无法控制，那我能够管制只上传曾经上传的文件内容，不就好了，这样大大放慢了从新上传的速度。所以便有了“断点续传”一说。此时，人群中有人插了一嘴，有些文件我曾经上传一遍了，为啥还要在上传，能不能不节约我流量和工夫。喔...这个嘛，简略，每次上传时判断下是否存在这个文件，若存在就不从新上传便可，于是又有了“秒传”一说。从此这"三兄弟" 便自行CP，统治了整个文件界。”

留神文中的代码并非理论代码，请移步至github查看最新代码
https://github.com/pseudo-god...

分片上传

HTML

原生INPUT款式较丑，这里通过款式叠加的形式，放一个Button.

  <div class="btns">    <el-button-group>      <el-button :disabled="changeDisabled">        <i class="el-icon-upload2 el-icon--left" size="mini"></i>抉择文件        <input          v-if="!changeDisabled"          type="file"          :multiple="multiple"          class="select-file-input"          :accept="accept"          @change="handleFileChange"        />      </el-button>      <el-button :disabled="uploadDisabled" @click="handleUpload()"><i class="el-icon-upload el-icon--left" size="mini"></i>上传</el-button>      <el-button :disabled="pauseDisabled" @click="handlePause"><i class="el-icon-video-pause el-icon--left" size="mini"></i>暂停</el-button>      <el-button :disabled="resumeDisabled" @click="handleResume"><i class="el-icon-video-play el-icon--left" size="mini"></i>复原</el-button>      <el-button :disabled="clearDisabled" @click="clearFiles"><i class="el-icon-video-play el-icon--left" size="mini"></i>清空</el-button>    </el-button-group>    <slot      //data 数据 var chunkSize = 10 * 1024 * 1024; // 切片大小var fileIndex = 0; // 以后正在被遍历的文件下标 data: () => ({    container: {      files: null    },    tempFilesArr: [], // 存储files信息    cancels: [], // 存储要勾销的申请    tempThreads: 3,    // 默认状态    status: Status.wait  }),    

一个略微难看的UI就进去了。

抉择文件

抉择文件过程中，须要对外暴露出几个钩子，相熟elementUi的同学应该很眼生，这几个钩子根本与其统一。onExceed:文件超出个数限度时的钩子、beforeUpload：文件上传之前

fileIndex 这个很重要，因为是多文件上传，所以定位以后正在被上传的文件就很重要，根本都靠它

handleFileChange(e) {  const files = e.target.files;  if (!files) return;  Object.assign(this.$data, this.$options.data()); // 重置data所有数据  fileIndex = 0; // 重置文件下标  this.container.files = files;  // 判断文件抉择的个数  if (this.limit && this.container.files.length > this.limit) {    this.onExceed && this.onExceed(files);    return;  }  // 因filelist不可编辑，故拷贝filelist 对象  var index = 0; // 所选文件的下标，次要用于剔除文件后，原文件list与临时文件list不对应的状况  for (const key in this.container.files) {    if (this.container.files.hasOwnProperty(key)) {      const file = this.container.files[key];      if (this.beforeUpload) {        const before = this.beforeUpload(file);        if (before) {          this.pushTempFile(file, index);        }      }      if (!this.beforeUpload) {        this.pushTempFile(file, index);      }      index++;    }  }},// 存入 tempFilesArr，为了下面的钩子，所以将代码做了拆分pushTempFile(file, index) {  // 额定的初始值  const obj = {    status: fileStatus.wait,    chunkList: [],    uploadProgress: 0,    hashProgress: 0,    index  };  for (const k in file) {    obj[k] = file[k];  }  console.log('pushTempFile -> obj', obj);  this.tempFilesArr.push(obj);}

分片上传

• 创立切片，循环合成文件即可

    createFileChunk(file, size = chunkSize) {    const fileChunkList = [];    var count = 0;    while (count < file.size) {      fileChunkList.push({        file: file.slice(count, count + size)      });      count += size;    }    return fileChunkList;  }

• 循环创立切片,既然咱们做的是多文件，所以这里就有循环去解决，顺次创立文件切片，及切片的上传。

async handleUpload(resume) {  if (!this.container.files) return;  this.status = Status.uploading;  const filesArr = this.container.files;  var tempFilesArr = this.tempFilesArr;  for (let i = 0; i < tempFilesArr.length; i++) {    fileIndex = i;    //创立切片    const fileChunkList = this.createFileChunk(      filesArr[tempFilesArr[i].index]    );          tempFilesArr[i].fileHash ='xxxx'; // 先不必看这个，前面会讲，占个地位    tempFilesArr[i].chunkList = fileChunkList.map(({ file }, index) => ({      fileHash: tempFilesArr[i].hash,      fileName: tempFilesArr[i].name,      index,      hash: tempFilesArr[i].hash + '-' + index,      chunk: file,      size: file.size,      uploaded: false,      progress: 0, // 每个块的上传进度      status: 'wait' // 上传状态，用作进度状态显示    }));        //上传切片    await this.uploadChunks(this.tempFilesArr[i]);  }}

• 上传切片，这个里须要思考的问题较多，也算是外围吧，uploadChunks办法只负责结构传递给后端的数据，外围上传性能放到sendRequest办法中

 async uploadChunks(data) {  var chunkData = data.chunkList;  const requestDataList = chunkData    .map(({ fileHash, chunk, fileName, index }) => {      const formData = new FormData();      formData.append('md5', fileHash);      formData.append('file', chunk);      formData.append('fileName', index); // 文件名应用切片的下标      return { formData, index, fileName };    });  try {    await this.sendRequest(requestDataList, chunkData);  } catch (error) {    // 上传有被reject的    this.$message.error('亲 上传失败了,思考重试下呦' + error);    return;  }  // 合并切片  const isUpload = chunkData.some(item => item.uploaded === false);  console.log('created -> isUpload', isUpload);  if (isUpload) {    alert('存在失败的切片');  } else {    // 执行合并    await this.mergeRequest(data);  }}

• sendReques。上传这是最重要的中央，也是容易失败的中央,假如有10个分片，那咱们若是间接发10个申请的话，很容易达到浏览器的瓶颈，所以须要对申请进行并发解决。

  • 并发解决：这里我应用for循环管制并发的初始并发数，而后在 handler 函数里调用本人，这样就管制了并发。在handler中，通过数组API.shift模仿队列的成果，来上传切片。

  • 重试: retryArr 数组存储每个切片文件申请的重试次数，做累加。比方[1,0,2],就是第0个文件切片报错1次，第2个报错2次。为保障能与文件做对应，const index = formInfo.index; 咱们间接从数据中拿之前定义好的index。 若失败后，将失败的申请重新加入队列即可。

    • 对于并发及重试我写了一个小Demo,若不了解能够本人在钻研下，文件地址：https://github.com/pseudo-god... , 重试代码如同被我弄丢了，大家要是有需要，我再补吧！

    // 并发解决sendRequest(forms, chunkData) {  var finished = 0;  const total = forms.length;  const that = this;  const retryArr = []; // 数组存储每个文件hash申请的重试次数，做累加 比方[1,0,2],就是第0个文件切片报错1次，第2个报错2次  return new Promise((resolve, reject) => {    const handler = () => {      if (forms.length) {        // 出栈        const formInfo = forms.shift();        const formData = formInfo.formData;        const index = formInfo.index;                instance.post('fileChunk', formData, {          onUploadProgress: that.createProgresshandler(chunkData[index]),          cancelToken: new CancelToken(c => this.cancels.push(c)),          timeout: 0        }).then(res => {          console.log('handler -> res', res);          // 更改状态          chunkData[index].uploaded = true;          chunkData[index].status = 'success';                    finished++;          handler();        })          .catch(e => {            // 若暂停，则禁止重试            if (this.status === Status.pause) return;            if (typeof retryArr[index] !== 'number') {              retryArr[index] = 0;            }            // 更新状态            chunkData[index].status = 'warning';            // 累加谬误次数            retryArr[index]++;            // 重试3次            if (retryArr[index] >= this.chunkRetry) {              return reject('重试失败', retryArr);            }            this.tempThreads++; // 开释以后占用的通道            // 将失败的重新加入队列            forms.push(formInfo);            handler();          });      }      if (finished >= total) {        resolve('done');      }    };    // 管制并发    for (let i = 0; i < this.tempThreads; i++) {      handler();    }  });}

• 切片的上传进度，通过axios的onUploadProgress事件，联合createProgresshandler办法进行保护

// 切片上传进度createProgresshandler(item) {  return p => {    item.progress = parseInt(String((p.loaded / p.total) * 100));    this.fileProgress();  };}

Hash计算

其实就是算一个文件的MD5值，MD5在整个我的项目中用到的中央也就几点。

• 秒传，须要通过MD5值判断文件是否已存在。
• 续传：须要用到MD5作为key值，当惟一值应用。

本我的项目次要应用worker解决，性能及速度都会有很大晋升.
因为是多文件，所以HASH的计算进度也要体现在每个文件上，所以这里应用全局变量fileIndex来定位以后正在被上传的文件

// 生成文件 hash（web-worker）calculateHash(fileChunkList) {  return new Promise(resolve => {    this.container.worker = new Worker('./hash.js');    this.container.worker.postMessage({ fileChunkList });    this.container.worker.onmessage = e => {      const { percentage, hash } = e.data;      if (this.tempFilesArr[fileIndex]) {        this.tempFilesArr[fileIndex].hashProgress = Number(          percentage.toFixed(0)        );      }      if (hash) {        resolve(hash);      }    };  });}

因应用worker，所以咱们不能间接应用NPM包形式应用MD5。须要独自去下载spark-md5.js文件，并引入

//hash.jsself.importScripts("/spark-md5.min.js"); // 导入脚本// 生成文件 hashself.onmessage = e => {  const { fileChunkList } = e.data;  const spark = new self.SparkMD5.ArrayBuffer();  let percentage = 0;  let count = 0;  const loadNext = index => {    const reader = new FileReader();    reader.readAsArrayBuffer(fileChunkList[index].file);    reader.onload = e => {      count++;      spark.append(e.target.result);      if (count === fileChunkList.length) {        self.postMessage({          percentage: 100,          hash: spark.end()        });        self.close();      } else {        percentage += 100 / fileChunkList.length;        self.postMessage({          percentage        });        loadNext(count);      }    };  };  loadNext(0);};

文件合并

当咱们的切片全副上传完毕后，就须要进行文件的合并，这里咱们只须要申请接口即可

mergeRequest(data) {   const obj = {     md5: data.fileHash,     fileName: data.name,     fileChunkNum: data.chunkList.length   };   instance.post('fileChunk/merge', obj,      {       timeout: 0     })     .then((res) => {       this.$message.success('上传胜利');     }); }

Done: 至此一个分片上传的性能便已实现

断点续传

顾名思义，就是从那断的就从那开始，明确思路就很简略了。个别有2种形式，一种为服务器端返回，告知我从那开始，还有一种是浏览器端自行处理。2种计划各有优缺点。本我的项目应用第二种。

思路：已文件HASH为key值，每个切片上传胜利后，记录下来便可。若须要续传时，间接跳过记录中已存在的便可。本我的项目将应用Localstorage进行存储,这里我已提前封装好addChunkStorage、getChunkStorage办法。

存储在Stroage的数据

缓存解决

在切片上传的axios胜利回调中，存储已上传胜利的切片

 instance.post('fileChunk', formData, )  .then(res => {    // 存储已上传的切片下标+ this.addChunkStorage(chunkData[index].fileHash, index);    handler();  })

在切片上传前，先看下localstorage中是否存在已上传的切片,并批改uploaded

    async handleUpload(resume) {+      const getChunkStorage = this.getChunkStorage(tempFilesArr[i].hash);      tempFilesArr[i].chunkList = fileChunkList.map(({ file }, index) => ({+        uploaded: getChunkStorage && getChunkStorage.includes(index), // 标识：是否已实现上传+        progress: getChunkStorage && getChunkStorage.includes(index) ? 100 : 0,+        status: getChunkStorage && getChunkStorage.includes(index)? 'success'+              : 'wait' // 上传状态，用作进度状态显示      }));    }

结构切片数据时，过滤掉uploaded为true的

 async uploadChunks(data) {  var chunkData = data.chunkList;  const requestDataList = chunkData+    .filter(({ uploaded }) => !uploaded)    .map(({ fileHash, chunk, fileName, index }) => {      const formData = new FormData();      formData.append('md5', fileHash);      formData.append('file', chunk);      formData.append('fileName', index); // 文件名应用切片的下标      return { formData, index, fileName };    })}

垃圾文件清理

随着上传文件的增多，相应的垃圾文件也会增多，比方有些时候上传一半就不再持续，或上传失败，碎片文件就会增多。解决方案我目前想了2种

• 前端在localstorage设置缓存工夫，超过工夫就发送申请告诉后端清理碎片文件，同时前端也要清理缓存。
• 前后端都约定好，每个缓存从生成开始，只能存储12小时，12小时后主动清理

以上2中计划仿佛都有点问题，极有可能造成前后端因时间差，引发切片上传异样的问题，前面想到适合的解决方案再来更新吧。

Done: 续传到这里也就实现了。

秒传

这算是最简略的，只是听起来很厉害的样子。原理：计算整个文件的HASH，在执行上传操作前，向服务端发送申请，传递MD5值，后端进行文件检索。若服务器中已存在该文件，便不进行后续的任何操作，上传也便间接完结。大家一看就明确

async handleUpload(resume) {    if (!this.container.files) return;    const filesArr = this.container.files;    var tempFilesArr = this.tempFilesArr;    for (let i = 0; i < tempFilesArr.length; i++) {      const fileChunkList = this.createFileChunk(        filesArr[tempFilesArr[i].index]      );      // hash校验，是否为秒传+      tempFilesArr[i].hash = await this.calculateHash(fileChunkList);+      const verifyRes = await this.verifyUpload(+        tempFilesArr[i].name,+        tempFilesArr[i].hash+      );+      if (verifyRes.data.presence) {+       tempFilesArr[i].status = fileStatus.secondPass;+       tempFilesArr[i].uploadProgress = 100;+      } else {        console.log('开始上传切片文件----》', tempFilesArr[i].name);        await this.uploadChunks(this.tempFilesArr[i]);      }    }  }

  // 文件上传之前的校验： 校验文件是否已存在  verifyUpload(fileName, fileHash) {    return new Promise(resolve => {      const obj = {        md5: fileHash,        fileName,        ...this.uploadArguments //传递其余参数      };      instance        .post('fileChunk/presence', obj)        .then(res => {          resolve(res.data);        })        .catch(err => {          console.log('verifyUpload -> err', err);        });    });  }

Done: 秒传到这里也就实现了。

后端解决

文章如同有点长了，具体代码逻辑就先不贴了，除非有人留言要求，嘻嘻，有工夫再更新

Node版

请返回 https://github.com/pseudo-god... 查看

JAVA版

下周应该会更新解决

PHP版

1年多没写PHP了，抽空我会缓缓补上来

待欠缺

• 切片的大小：这个前面会做出动静计算的。须要依据以后所上传文件的大小，主动计算适合的切片大小。避免出现切片过多的状况。
• 文件追加：目前上传文件过程中，不能持续抉择文件退出队列。（这个没想好应该怎么解决。）

更新记录

组件曾经运行一段时间了，期间也测试出几个问题，原本认为没BUG的，看起来BUG都挺重大

BUG-1：当同时上传多个内容雷同然而文件名称不同的文件时，呈现上传失败的问题。

预期后果：第一个上传胜利后，前面雷同的问文件应该间接秒传

理论后果：第一个上传胜利后，其余雷同的文件都失败，错误信息，块数不对。

起因：当第一个文件块上传完毕后，便立刻进行了下一个文件的循环，导致无奈及时获取文件是否已秒传的状态，从而导致失败。

解决方案：在以后文件分片上传完毕并且申请合并接口结束后，再进行下一次循环。

将子办法都改为同步形式，mergeRequest 和 uploadChunks 办法

BUG-2: 当每次抉择雷同的文件并触发beforeUpload办法时，若第二次也抉择了雷同的文件，beforeUpload办法生效，从而导致整个流程生效。

起因：之前每次抉择文件时，没有清空上次所选input文件的数据，雷同数据的状况下，是不会触发input的change事件。

解决方案：每次点击input时，清空数据即可。我顺带优化了下其余的代码，具体看提交记录吧。

<input  v-if="!changeDisabled"  type="file"  :multiple="multiple"  class="select-file-input"  :accept="accept"+  nclick="f.outerHTML=f.outerHTML"  @change="handleFileChange"/>

重写了暂停和复原的性能，实际上，次要是减少了暂停和复原的状态

之前的解决逻辑太简略粗犷，存在诸多问题。当初将状态定位在每一个文件之上，这样复原上传时，间接跳过即可

封装组件

写了一大堆，其实以上代码你间接复制也无奈应用，这里我将此封装了一个组件。大家能够去github下载文件，外面有应用案例 ，若有用记得顺手给个star，谢谢!

偷个懒，具体封装组件的代码就不列出来了，大家间接去下载文件查看,若有不明确的，可留言。

组件文档

Attribute

Slot

后端接口文档：按文档实现即可

代码地址：https://github.com/pseudo-god...

接口文档地址 https://docs.apipost.cn/view/...