微信小程序单图上传和多图上传

本文主要是介绍微信小程序单图上传和多图上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片上传主要用到

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');
}

这篇关于微信小程序单图上传和多图上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---