前端实现显示文件上传进度的功能

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

具体功能点

实现能够显示文件上传进度的功能

实现

因为用的axios这个库，所以可以结合axios里面的onUploadProgress这个方法来实现。因为文件切块了，所以其实需要对每一个切块文件进行计算，最后再总和而成。

代码

// 上传进度
onUploadProgress: (progressEvent) => {
  setPageProps((pre) => {
    const length = fineFileIndex(pre.upload.list, uid);
    const progress = {
      loaded: progressEvent.loaded || 0,
      total: progressEvent.total || 0,
    };
    pre.upload.list[length].progress[index] = progress;
  });
},
  
// 计算上传进度
const loaded = record.progress.reduce((acc, cur) => {
    return acc + cur.loaded;
}, 0);
const percent = parseInt(String((loaded / record.size) * 100), 10);

如果配合上取消请求的代码可以实现文件断点续传等功能

代码

// 取消请求设置
cancelToken: new CancelToken((c) => {
  // 储存切片请求的数组
  setPageProps((pre) => {
    const length = _.findIndex(pre.upload.list, (items) => items.id === uid);
    pre.upload.list[length].cancelReq = pre.upload.list[length].cancelReq.concat([c]);
  });
})