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

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

交互

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

试过这样写：

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

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

我来解答赞 1 收藏

反馈

1 条解答

百里世鹏 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