原因:
uniapp上传文件的时候不能用 new FormData 上传,必须用 uni.uploadFile,是因为跨端环境不统一、没有 DOM、没有原生 File/FormData 对象。
一、各端根本差异(最关键)
1)小程序 / App(iOS/Android)
- 没有浏览器 DOM :没有
window、没有FormData、没有File、没有<input type="file">。 - 你拿不到浏览器里的
file对象,自然没法new FormData().append('file', ...)。 - 只能通过 uni 提供的 API 选文件:
uni.chooseImageuni.chooseFile返回的是临时路径字符串 (如wxfile://...、_www/...),不是 File 对象。
2)H5 端(浏览器)
- 虽然浏览器有
FormData,但 uni.uploadFile 不接受原生 FormData 作为参数。 - uni.uploadFile 的
formData只接受普通 JS 对象 (key-value),内部会帮你组装成正确的multipart/form-data请求。 - 如果你在 H5 自己
new FormData然后用uni.request发:- 容易边界(boundary)错误
- Content-Type 写错
- 二进制文件损坏
- 后端收不到文件。
二、uni.uploadFile 做了什么(为什么必须用它)
它是 uni-app 跨端统一的文件上传专用 API:
- 自动处理 multipart/form-data
- 自动设置正确
Content-Type - 自动生成合法 boundary
- 自动把文件流和表单字段打包。
- 自动设置正确
- 统一路径处理
- 小程序:
wxfile:// - App:本地绝对路径
- H5:转成浏览器 File/Blob 你只需要传
filePath字符串,不用管各端差异。
- 小程序:
- 底层走平台原生能力
- 小程序:底层调用
wx.uploadFile - App:原生网络库上传
- 比自己用
uni.request + FormData稳定得多。
- 小程序:底层调用