获取上传进度的几种方式

今天测试说咱们的上传后的等待界面都没有loading, 看起来不像是等待界面需要优化。然后产品说参考下其他业务的上传搞下吧。 我以为就一个loading的事，发现其他业务上传使用的是环形、线形进度条。我说现在接口是没有返回当前进度的，如果是以上传完成后的文件数量（因为我们是一个个文件上传分批次调的接口）做判断也不太准确，因为文件有大有小的。

后面就找另外一个前端同事聊了下他告诉我说axios是有监听整个上传进度api的，那我就针对文件上传去了解了下做以下总结：

前端使用axios实现监听上传进度

咱们先使用axios实现监听上传进度如下：

axios.post('/api/file/uploadfile', form, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: (progressEvent) => {
    if (progressEvent.lengthComputable) {
      this.progresss = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    }
  },})
  .then((res) => {
   // ...
  });

前端使用ajax获取上传进度

前端使用ajax如何获取上传进度呢？ 如下：

const xhr = new XMLHttpRequest();xhr.upload.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const progressPercentage = Math.round((event.loaded / event.total) * 100);
    console.log(`上传进度: ${progressPercentage}%`);
  }});

前端使用fetch API获取上传进度

如何使用fetch API获取上传的进度呢？如下：

const file = document.getElementById('fileInput').files[0];fetch('/upload', {
  method: 'POST',
  body: file,
  onprogress: (event) => {
    if (event.lengthComputable) {
      const progressPercentage = Math.round((event.loaded / event.total) * 100);
      console.log(`上传进度: ${progressPercentage}%`);
    }
  },})
  .then((response) => {
    // 处理响应结果
  })
  .catch((error) => {
    // 处理错误
  });

上面几种都是获取上传进度展示的进度条。那么咱们还有那些展示进度条的方式呢？

多文件上传展示一个进度条

如果支持多个文件上传，并已文件上传个数展示进度条的话，一般都是怎么做的呢？

• 需要考虑多个文件比如10个文件，在你上传完第一个的时候进度条需要控制再10%以下，依此类推。如下面一块代码：

let progress = 0;const UPLOAD_TYPE_MAP = {
  UPLOADING: 'uploading',
  COMPLATE: 'complate',}const files = [{ file:'', status: UPLOAD_TYPE_MAP.UPLOADING }, { file:'', status: UPLOAD_TYPE_MAP.UPLOADING }];for (let index = 0; index < files.length; index++) {
  const element = files[index];
  // 1、这里是调接口的逻辑，可以是并行也可以完成一个调下一个，这个看你们的接口的限速吧，我就按照并行做了。
  // 2、这里是每个文件上传完成的逻辑，更改当前文件的状态把status 改成UPLOAD_TYPE_MAP.COMPLATE}const timer = setInterval(() => {
  const eachProgress = 100 / files.length; // 计算单个的比例
  const complateUpload = files.filter((item) => item.status === UPLOAD_TYPE_MAP.COMPLATE);
  const upperLimit = (complateUpload.length + 1) * eachProgress;
  const maxProgress = upperLimit > 100 ? 100 : upperLimit; // 计算出当前最大进度

  if(progress < maxProgress) {
    progress++; // 边界控制
  }
  if(maxProgress === 100) {
    progress = 100;
    clearInterval(time);
  }}, 500);

上面就多文件展示一个进度条的具体代码。其实不是很准确，文件有大有小，如果文件大小差不太多展示开可以。其实最好的方案是分别利用axios、ajax等分别展示一个进度条。还是看业务需求吧，

大文件分片上传展示进度条

先简单说下分片上传的好处如下：

1. 可靠性和鲁棒性：将大文件分成小块进行上传，即使出现网络中断或其他意外情况，只需要重新上传失败的分片，而不需要重新上传整个文件，提高上传的可靠性和鲁棒性。

2. 传输效率：由于大文件被分成多个小块进行并行上传，可以充分利用网络带宽，提高传输速度和效率。

3. 断点续传：如果上传过程中断，可以根据已成功上传的分片信息，从上次中断的地方继续上传，避免重复上传已经上传过的部分，节省时间和资源。

4. 内存占用低：大文件一次性加载到内存中可能导致内存溢出，而分片上传只需加载单个分片，减少了对内存的压力，并适应内存有限的环境。

5. 服务器负载平衡：使用分片上传可以将上传请求分散到多个服务器，降低单一服务器的负载压力，提高整体系统的稳定性和吞吐量。

6. 前端 上传