上传文件时如何实时显示进度条？

小俊杰提问于 2026-03-30 14:10:12 阅读 4

交互

我用 axios 上传文件，但搞不懂怎么拿到上传的实时进度。

试过 onUploadProgress 回调，但进度条要么不动，要么直接跳到100%，根本没用。是不是我写法有问题？

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

我来解答赞 2 收藏

反馈

1 条解答

雨路 Dev Lv1

这问题我遇到过，你代码其实差不多了，就是状态更新这块可能有点小问题。试试这样：

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

  onUploadProgress: (progressEvent) => {

    if (progressEvent.total !== null) {

      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);

      setProgress(percent);

      // 强制刷新状态

      setProgress(prev => prev); 

    }

  },

  headers: {

    'Content-Type': 'multipart/form-data'

  }

})

.catch(error => console.error('上传失败', error))

记得检查下后端是不是按chunk返回的进度数据，有时候服务端写得不好也会导致这个问题。另外 setProgress 用完再调一次自己，可以确保React状态更新更及时。

拿去改改应该能行，不行再来找我吐槽。

2026-03-30 14:17