小程序上传图片wx.uploadFile用法
目录
小程序上传图片wx.uploadFile用法
前言：
小程序的上传和我们开发其他项目是不一样的，这里说一说他的用法。
使用步骤：
1、这里默认开发环境，并且默认不校验https,部署好环境 设置-》项目设置-》勾选
2、页面添加事件方法，这里核心方法是两个，一个是 是获取图片，一个是 是上传图片
//选取图片
wx.chooseImage({
count: 1,
sizeType: ['original'],//原图
sourceType: [ 'album','camera'],//支持选取图片
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0];
//上传图片
wx.uploadFile({
//请求后台的路径
url: 'http://192.168.35.201:8090/image',
//小程序本地的路径
filePath: tempFilePaths,
//后台获取我们图片的key
name: 'images',
//额外的参数formData
formData: {
'id': 'test',
a:{ abc:'111'},
b:[1,2,3]
},
success: function (res) {
//上传成功
debugger
},
fail: function (res) {
debugger
},
})
}
})使用api:
1、 从本地相册选择图片或使用相机拍照。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| count | number | 9 | 否 | 最多可以选择的图片张数 |
| sizeType | Array. | [‘original’, ‘compressed’] | 否 | 所选的图片的尺寸 |
| sourceType | Array. | [‘album’, ‘camera’] | 否 | 选择图片的来源 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.sizeType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| original | 原图 | |
| compressed | 压缩图 |
object.sourceType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| album | 从相册选图 | |
| camera | 使用相机 |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| tempFilePaths | Array. | 图片的本地临时文件路径列表 (本地路径) | |
| tempFiles | Array. | 图片的本地临时文件列表 |
res.tempFiles 的结构
| 属性 | 类型 | 说明 |
|---|---|---|
| path | string | 本地临时文件路径 (本地路径) |
| size | number | 本地临时文件大小，单位 B |
2、
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中
content-type
为
multipart/form-data
。使用前请注意阅读
。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| url | string | 是 | 开发者服务器地址 | ||
| filePath | string | 是 | 要上传文件资源的路径 (本地路径) | ||
| name | string | 是 | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 | ||
| header | Object | 否 | HTTP 请求 Header，Header 中不能设置 Referer | ||
| formData | Object | 否 | HTTP 请求中其他额外的 form data | ||
| timeout | number | 否 | 超时时间，单位为毫秒 | ||
| success | function | 否 | 接口调用成功的回调函数 | ||
| fail | function | 否 | 接口调用失败的回调函数 | ||
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| data | string | 开发者服务器返回的数据 |
| statusCode | number | 开发者服务器返回的 HTTP 状态码 |
返回值
基础库 1.4.0 开始支持，低版本需做 。
一个可以监听上传进度进度变化的事件和取消上传的对象