uni.uploadFile不返回实时进度,必须通过uploadTask.onProgressUpdate监听获取;需立即绑定task实例的监听,批量上传时须为每项维护独立进度状态,微信小程序要求域名配置正确、无重定向、服务端返回Content-Length。

uni.uploadFile 本身不返回实时进度,必须靠监听 uploadTask.onProgressUpdate 才能拿到每帧上传百分比——这是实现批量上传进度条的唯一可靠方式,别信“直接读 response 就有进度”的说法。
uni.uploadFile 的 progress 回调怎么绑定
关键不是调用 uni.uploadFile 后直接处理返回值,而是必须保存其返回的 task 实例,并立刻挂上监听:
-
uni.uploadFile返回的是一个 task 对象(UploadTask类型),不是 Promise,不能 await - 必须在调用后立即调用
task.onProgressUpdate,否则第一帧进度会丢失(尤其小文件可能瞬间完成) - 微信小程序要求
onProgressUpdate必须在 upload 开始后 10ms 内注册,否则回调不触发
示例写法:
const task = uni.uploadFile({
url: 'https://api.example.com/upload',
filePath: tempFilePath,
name: 'file'
})
task.onProgressUpdate((res) => {
// res.progress 是 0–100 的整数
this.imageList[index].progress = res.progress
this.imageList[index].uploadStatus = 'uploading'
})
task.then(() => {
this.imageList[index].uploadStatus = 'success'
}).catch(() => {
this.imageList[index].uploadStatus = 'fail'
})
批量上传时如何避免进度互相覆盖
多个图片并发上传时,如果共用同一个 progress 变量,UI 上只会显示最后那个任务的进度。正确做法是为每张图维护独立状态:
- 每个图片对象里存
progress: 0、uploadStatus: 'pending'等字段 - 上传时传入当前图片在数组中的
index,确保onProgressUpdate能精准更新对应项 - 不要用全局变量或单个
currentProgress去汇总,用户需要看到“第 2 张 87%”、“第 4 张 12%”,不是“整体 45%”
错误示范:this.progress = res.progress → 所有图进度被最后一个覆盖
正确示范:this.imageList[i].progress = res.progress → 各自更新
微信小程序下 onProgressUpdate 不触发的常见原因
这不是 bug,是平台限制,以下三点任一不满足都会导致监听失效:
- 未在
manifest.json的mp-weixin.uploadFileDomain中配置合法上传域名(必须带 https,且与接口协议、端口、路径完全一致) - 上传 URL 使用了重定向(比如 302 跳转到另一个域名),小程序会中断进度监听
- 本地开发时用了代理(如 H5 的 devServer proxy),但小程序不走 proxy,必须直连真实后端地址
验证方法:打开微信开发者工具 → Network 标签页 → 查看 upload 请求的 Response Headers 是否包含 Content-Length;没有则服务端没返回文件长度,onProgressUpdate 拿不到总大小,进度恒为 0。
最易被忽略的一点:分片上传场景下,onProgressUpdate 只反映当前分片的上传进度,不是整个文件。如果你用第三方分片库(如 miniprogram-file-uploader),它的进度逻辑是封装好的,此时你监听的就不是 uni.uploadFile 的 task,而是它内部 emit 的事件——这点不看清文档,很容易以为“进度条不动”是自己代码问题。











