前端实现文件断点续传功能

最近在做大文件上传的需求，所以就有了这一系列前端文件上传功能的记录。

具体功能点

实现文件能够暂停上传
实现文件能够恢复上传

实现

刚开始的时候文件分块上传用的是并发，后来发现非常麻烦，不好控制，所以就改成逐个发送。所以实现断点续传也变得容易一些。只要记录以及上传成功的文件块，下次再从下一块文件开始上传就好。

所以这里需要加入状态：“正在上传”，“已暂停”，“等待中”……

代码

// 请求
const loopArray = (index: number, list: any[], uid: string) => {
  // 发送请求
  bucketAPI
    .putNameFsUpload(...list[index].props)
    .then(async (res) => {
    if (res.code === 200 && res.data.done) {
        if (index < list.length - 1) {
          // 存入已上传片段
          const requestIndex = fineFileIndex(requestQueue, uid);
          // 判断当前状态不是“stop”，才继续发送下一个块的请求
          if (arr.status !== 'stop') {
          	loopArray(index + 1, list, uid);
          }
        }
        if (index === list.length - 1) {
          // 整一个文件分块传送完毕
          ...
        }
    } else {
       // 文件某一块上传失败
       ...
    }
  })
    .catch((err) => {
   		// 文件上传失败
    ...
  });
};
           
// 暂停请求，只需要改变文件的状态为“暂停”即可
const stop = () => {
	changeFileStatus('stop', record.id);
}
    
// 恢复上传，只需改变文件状态为“正在上传”即可
const doing = () => {
	changeFileStatus('doing', record.id);
}