uni-app 上传文件
Api 接口
uni.uploadFile(OBJECT)
参数说明
参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
---|---|---|---|---|
url | String | 是 | 开发者服务器 url | |
files | Array | 否 | 需要上传的文件列表。 使用 files 时,filePath 和 name 不生效。 | App、H5( 2.6.15+) |
fileType | String | 见平台差异说明 | 文件类型,image/video/audio | 仅支付宝小程序,且必填。 |
file | File | 否 | 要上传的文件对象。 | 仅H5(2.6.15+)支持 |
filePath | String | 是 | 要上传文件资源的路径。 | |
name | String | 是 | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 | |
header | Object | 否 | HTTP 请求 Header, header 中不能设置 Referer。 | |
formData | Object | 否 | HTTP 请求中其他额外的 form data | |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
注意:
- App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
- hello uni-app中的客服反馈,支持多图上传。uni-app插件市场中也有多个封装的组件。
- App平台选择和上传非图像、视频文件,参考https://ask.dcloud.net.cn/article/35547
- 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
- 支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式
files参数说明
files 参数是一个 file 对象的数组,file 对象的结构如下:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
name | String | 否 | multipart 提交时,表单的项目名,默认为 file |
file | File | 否 | 要上传的文件对象,仅H5(2.6.15+)支持 |
uri | String | 是 | 文件的本地地址 |
Tip:
如果 name 不填或填的值相同,可能导致服务端读取文件时只能读取到一个文件。
success 返回参数说明
参数 | 类型 | 说明 |
---|---|---|
data | String | 开发者服务器返回的数据 |
statusCode | Number | 开发者服务器返回的 HTTP 状态码 |
代码示例
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: 'https://www.pangugle.com/uploadFile', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
}
});
}
});