文件上传时怎么监听进度条变化？
我用 axios 上传文件，想加个进度条，但 onUploadProgress 回调好像没触发，是我写错了吗？
试过这样写：
axios.post('/upload', file, {
onUploadProgress: (progressEvent) => {
console.log('progress:', progressEvent.loaded / progressEvent.total)
}
})但控制台完全没输出，文件倒是能传上去。是不是要配什么 headers 或者用 FormData 包一下？
- 2
回答
36浏览
文件上传时怎么监听进度条变化？
我用 axios 上传文件，想加个进度条，但 onUploadProgress 回调好像没触发，控制台也没报错。 试过这样写： axios.post('/upload', file...
- 2
回答
88浏览
文件上传时怎么监听并显示进度条？
我用 XMLHttpRequest 上传文件，但 progress 事件好像没触发，进度条一直不动，咋回事？ 我已经绑定了 onprogress 回调，也设置了 xhr.upload.onprogre...
- 2
回答
198浏览
线性进度条在文件上传时卡在50%不动怎么办？
我用axios实现文件上传时，线性进度条显示到50%就卡住不动了，明明文件还在传输。代码里监听了onUploadProgress事件，用progress.value = event.progress更...
- 1
回答
38浏览
如何实现文件上传时的百分比进度条？
我在做文件上传功能，想显示一个实时更新的百分比进度条，但不知道怎么拿到上传的进度数据。 用的是 axios 发请求，试过加 onUploadProgress 回调，但算出来的百分比总是不对，有时候超过...
- 2
回答
31浏览
用 XMLHttpRequest 上传文件时进度条不更新怎么办？
我用 XMLHttpRequest 做了个文件上传功能，想加个进度条，但 onprogress 回调根本没触发。试过把监听写在 open 之前和之后，都不行。后台接口是正常的，文件能传上去。 这是我的...
- 2
回答
136浏览
文件上传进度条为什么卡在0%不动？
我在做文件上传功能时加了进度条，用XMLHttpRequest监听progress事件，但上传开始后进度条一直显示0%没变化，这是为什么？ 我用CSS写了简单的进度条样式： .progress-con...
- 2
回答
209浏览
文件上传进度条百分比卡在0%不动怎么办？
正在做一个文件上传功能，想用XMLHttpRequest实现进度条显示百分比。按照网上的教程写了onprogress监听，但页面上的百分比一直卡在0%不更新，这是为什么呢？ 代码结构大概是这样的： x...
- 1
回答
45浏览
Arco Upload上传后怎么拿到文件的base64？
我用 Arco Design 的 Upload 组件上传图片，想在上传前预览，但不知道怎么把选中的文件转成 base64。试了 onChange 里的 file 对象，但直接读取好像不行。 网上查到要...
- 1
回答
28浏览
上传文件时如何实时显示进度条？
我用 axios 上传文件，但搞不懂怎么拿到上传的实时进度。 试过 onUploadProgress 回调，但进度条要么不动，要么直接跳到100%，根本没用。是不是我写法有问题？ axios.post...
- 2
回答
47浏览
ResizeObserver 监听元素尺寸变化不生效是怎么回事？
我用 ResizeObserver 监听一个 div 的尺寸变化，但怎么调整窗口大小都没触发回调，是我写错了吗？ 元素是动态渲染的，我在 mounted 里初始化的 observer，代码大概这样： ...
这里的关键点是使用 FormData 来封装文件数据，然后设置 headers 的 Content-Type 为 multipart/form-data。这样 axios 就能正确处理文件上传并触发进度回调了。希望这能解决你的问题！
第一，你直接传 file 对象不太规范，应该用 FormData 包一下。虽然直接传 file 有时候也能跑，但进度监听可能会出问题，而且后端接收也麻烦。
第二，如果文件太小，上传瞬间就完成了，进度事件根本来不及触发。你试试用个大点的文件，比如几MB的图片或视频。
给你一个正确的写法：
如果改完还是没反应，打开浏览器开发者工具的 Network 面板，看一下请求的 Content-Type 是不是 multipart/form-data，顺便确认一下请求耗时。要是耗时只有几毫秒，那说明文件太小瞬间传完了，换个大于 1MB 的文件测试应该就能看到进度了。
还有个坑，如果你本地开发用了代理或者 mock 数据，进度事件也可能被吞掉，直接用真实后端接口测试更靠谱。