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

志利酱~ 提问于 2026-02-27 21:39:21 阅读 11

交互

我用 axios 上传文件，想加个进度条，但 onUploadProgress 回调好像没触发，是我写错了吗？

试过这样写：

axios.post('/upload', file, {
  onUploadProgress: (progressEvent) => {
    console.log('progress:', progressEvent.loaded / progressEvent.total)
  }
})

但控制台完全没输出，文件倒是能传上去。是不是要配什么 headers 或者用 FormData 包一下？

文件上传进度监听

我来解答赞 4 收藏

反馈

1 条解答

西门君杰 Lv1

这个问题我之前也踩过坑，主要有两个原因。

第一，你直接传 file 对象不太规范，应该用 FormData 包一下。虽然直接传 file 有时候也能跑，但进度监听可能会出问题，而且后端接收也麻烦。

第二，如果文件太小，上传瞬间就完成了，进度事件根本来不及触发。你试试用个大点的文件，比如几MB的图片或视频。

给你一个正确的写法：

const formData = new FormData();

formData.append('file', file);



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

  headers: {

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

  },

  onUploadProgress: (progressEvent) => {

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

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

  }

}).then(res => {

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

});

如果改完还是没反应，打开浏览器开发者工具的 Network 面板，看一下请求的 Content-Type 是不是 multipart/form-data，顺便确认一下请求耗时。要是耗时只有几毫秒，那说明文件太小瞬间传完了，换个大于 1MB 的文件测试应该就能看到进度了。

还有个坑，如果你本地开发用了代理或者 mock 数据，进度事件也可能被吞掉，直接用真实后端接口测试更靠谱。

2026-02-28 16:13