文件上传时怎么监听进度条变化？

萌新.雨路提问于 2026-02-27 19:45:17 阅读 36

交互

我用 axios 上传文件，想加个进度条，但 onUploadProgress 回调好像没触发，控制台也没报错。

试过这样写：

axios.post('/upload', file, {
  onUploadProgress: (progressEvent) => {
    console.log('上传进度:', progressEvent.loaded / progressEvent.total);
  }
})

但进度日志完全没输出，是我漏了什么配置吗？还是得用原生 XMLHttpRequest 才行？

我来解答赞 12 收藏

反馈

2 条解答

___淑霞 Lv1

啊这个问题我也遇到过，当时调试了好久才发现坑在哪。你代码其实没写错，但可能忽略了两个关键点：

第一，axios的上传进度监听依赖后端支持。我之前也以为只要前端写了就能用，后来发现如果后端没正确处理Content-Length头部，progressEvent.total就会是0。你可以先用Postman测试下接口是否支持分块传输。

第二，文件要用FormData包装。直接传file对象有时会出问题，改成这样：

const formData = new FormData();

formData.append('file', file);



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

  onUploadProgress: (e) => {

    if(e.lengthComputable) {  // 这个判断很重要

      console.log('进度:', Math.round((e.loaded / e.total) * 100));

    }

  }

})

另外有个小坑是开发环境下如果用webpack-dev-server代理请求，有时会吞掉进度事件。可以试试直接请求后端地址排除这个问题。

如果还是不行，建议先用原生XHR验证下基础功能是否正常，我之前就是这样一步步排查出来的。

2026-03-09 10:19

百里世鹏 Lv1

你这代码有两个问题。

第一个，file 直接丢进去不行，得用 FormData 包一层。

第二个，本地开发环境上传太快，进度条一闪而过你根本看不见，以为没触发。

直接复制过去试试：

const formData = new FormData();

formData.append('file', file);



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

  headers: {

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

  },

  onUploadProgress: (progressEvent) => {

    if (progressEvent.total) {

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

      console.log('上传进度:', percent + '%');

    }

  }

}).then(res => {

  console.log('上传完成', res);

}).catch(err => {

  console.error('上传失败', err);

});

如果本地测试想看清进度条效果，可以找个大点的文件，或者用 Chrome 开发者工具把网速调慢，Network 面板里有个 Throttling 选项，选 Slow 3G 就能看清进度变化了。

还有个坑，某些版本的 axios 在 Node.js 环境下不支持 onUploadProgress，但浏览器端没问题，确保你是在浏览器里跑的。

2026-02-28 18:10