本文主要是介绍微信小程序单图上传和多图上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
图片上传主要用到
1、wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| count | number | 9 | 否 | 最多可以选择的图片张数 |
| sizeType | Array.<string> | ['original', 'compressed'] | 否 | 所选的图片的尺寸 |
| sourceType | Array.<string> | ['album', 'camera'] | 否 | 选择图片的来源 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.sizeType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| original | 原图 | |
| compressed | 压缩图 |
object.sourceType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| album | 从相册选图 | |
| camera | 使用相机 |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| tempFilePaths | Array.<string> | 图片的本地临时文件路径列表 | |
| tempFiles | Array.<Object> | 图片的本地临时文件列表 | 1.2.0 |
res.tempFiles 的结构
| 属性 | 类型 | 说明 |
|---|---|---|
| path | string | 本地临时文件路径 |
| size | number | 本地临时文件大小，单位 B |
wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths}
})
2、wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 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 | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| data | string | 开发者服务器返回的数据 |
| statusCode | number | 开发者服务器返回的 HTTP 状态码 |
返回值
UploadTask
基础库 1.4.0 开始支持，低版本需做兼容处理。
一个可以监听上传进度进度变化的事件和取消上传的对象
示例代码
wx.chooseImage({success (res) {const tempFilePaths = res.tempFilePathswx.uploadFile({url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success (res){const data = res.data//do something}})}
})
小程序案例：
.wxml 文件：
<view> <button bindtap='photo' type='warn' style='width:50%; margin:50rpx auto'>选择图片</button> </view>
.js 文件
（1）单图上传
photo: function (e) {wx.chooseImage({count: 1, //默认上传个数sizeType: ['original', 'compressed'],sourceType: ['album'],success(res) {// tempFilePath可以作为img标签的src属性显示图片var albumPaths = res.tempFilePaths[0]console.log('图片地址名称' + albumPaths);wx.uploadFile({url: app.appUrl + 'img',filePath: albumPaths,name: 'img',formData: {'nickName': '123',//其他参数'openid': 'xxssdazcs5gxxxaa',//其他参数},success(res) {console.log(res)}})}})},
（2）多图上传（相比单图上传，多了个for遍历）
photo: function (e) {wx.chooseImage({count: 3,//默认上传个数sizeType: ['original', 'compressed'],sourceType: ['album'],success(res) {// tempFilePath可以作为img标签的src属性显示图片var albumPaths = res.tempFilePathsfor (var i = 0; i < albumPaths.length; i++) {console.log('图片地址名称' + albumPaths[i]);wx.uploadFile({url: app.appUrl + 'img',filePath: albumPaths[i],name: 'img',formData: {'nickName': '123',//其他参数'openid': 'xxssdazcs5gxxxaa',//其他参数},success(res) {console.log(res)}})}}})},
后端代码：
public function img(){$file = request()->file('img');$info = $file->move(ROOT_PATH . 'public' . DS . 'static/uploads/ceshi');
}
这篇关于微信小程序单图上传和多图上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
