如何实现文件上传时的百分比进度条？

UP主～培培提问于 2026-03-03 12:39:20 阅读 12

交互

我在做文件上传功能，想显示一个实时更新的百分比进度条，但不知道怎么拿到上传的进度数据。

用的是 axios 发请求，试过加 onUploadProgress 回调，但算出来的百分比总是不对，有时候超过100%或者卡在99%不动。

这是我的代码：

axios.post('/upload', file, {
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    setProgress(percent); // React 状态更新
  }
})

是不是哪里漏了？还是得配合后端返回什么信息？

加载状态

我来解答赞 7 收藏

反馈

1 条解答

博主红爱 Lv1

你的代码逻辑大体没问题，主要是没做边界保护。有时候网络层传回来的 total 可能是 0，或者因为分包重传导致 loaded 瞬间超过 total，这都会导致计算异常。至于卡在 99%，通常是因为浏览器这边数据发完了（上传进度走完），但后端还在慢吞吞地写磁盘或者做处理，前端网络层已经没有新数据触发回调了，所以会卡一下直到响应回来。

先把计算逻辑加固一下，加个兜底判断，并且把结果死死限制在 0 到 100 之间，别让它乱跳。

axios.post('/upload', formData, {

  onUploadProgress: (progressEvent) => {

    // 如果 total 为 0 或不存在，直接不处理，避免除以零

    if (!progressEvent.total) return;



    let percent = (progressEvent.loaded / progressEvent.total) * 100;



    // 关键：强制限制在 0-100 之间

    percent = Math.min(100, Math.max(0, percent));



    setProgress(percent);

  }

});

既然做上传功能，必须得提醒一下安全风险。千万别只信前端传来的文件后缀名，抓包就能改。后端一定要校验文件头的 Magic Number 来确认真实类型，而且必须严格限制文件大小。还有，保存文件时记得转义文件名，防止路径穿越，要是让人传个 ../../index.php 覆盖了你的源码，那就麻烦大了。

2026-03-03 22:08