onUploadProgress实现文件上传进度小踩坑

问题场景： 文件上传后列表显示上传进度已完成，但是后续流程中却缺失文件

定位问题

文件列表通过onUploadProgress实现文件上传进度的前端可视化。onUploadProgress允许指定一个回调函数，当上传进度发生变化时会被调用。oaded 表示已上传的字节数，total 表示总字节数，两者的比例可作为上传进度的标识

const [error, data] = await ossUploadSync(formData, {
        onUploadProgress: (e) => {
          const complete = Number((e.loaded / e.total) * 100); 
          updateUIProgress({ name: file.name, value: complete });
        },
        timeout: 60000 * 30,
      });

解决问题

问题的关键在于，上面的进度完成是文件已经上传到后端。多个大文件上传时，可能存在后端数据处理需要时间。这样的时差造成，立即查询时有些文件查询不到。所以上传完成时机应该是后台返回了响应数据

// 更新进度状态
function updateUIProgress(progress: { name: string; value: number; complete: boolean }) {
    const { name, value, complete } = progress;
    let updateSucc = true;
    let newRate = value;
    if (value === 100) {
      newRate = complete ? 100 : 99.9;
    }
    changeModelData(
      modelData.map((item) => {
        if (item.name === name) {
          item.progress = newRate; 
        }
        if (item.progress !== 100) updateSucc = false;
        return item;
      })
    );
    if (updateSucc) {
      setIsUploadCompleted(true);
    }
  }

const [error, data] = await ossUploadSync(formData, {
        onUploadProgress: (e) => {
          const rate = Number((e.loaded / e.total) * 100);
          updateUIProgress({ name: obj.file.name, value: rate, complete: false });
        },
        timeout: 60000 * 30,
      });
      // 有响应数据后台才上传完成
      if (data) {
        updateUIProgress({ name: obj.file.name, value: 100, complete: true });
      }