上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢？
利用wx.chooseImage()，wx.uploadFile()两个接口即可完成小程序的批量上传图片。
1, 知己知彼，百战不殆（先来瞅瞅这两个api的主要参数）
wx.chooseImage()
从本地相册选择图片或使用相机拍照。
主要参数：
count：控制选择图片张数至多9张；
sizeType： 选择图片尺寸（压缩：compressed or 原图：original）；
sourceType： 图片来源（相册：album or 拍照：camera）
wx.uploadFile()
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data
主要参数：
url： 图片上传接口；
filePath： 上传资源路径（string）;
name: 文件对应的 key,(与后台接口约定的key);
wx.chooseImage成功返回值res.tempFilePaths为所选资源路径数组
wx.uploadFile的filePath入参必须为string且是生效的资源路径方能上传成功，故需要采用递归的方法循环调用方能实现批量上传。
2, 工欲善其事必先利其器（进行批量上传的封装）
util.js
/*
* 批量上传函数
* @params {*} params 上传入参对象
* @params {Function} callbackFn 循环回调函数
* @params {Function} successFn 成功回调函数
*/
const batchUpload = (params,callBack,successFn) => {
if(!params.uploadUrl) {
console.log('请传入上传地址')
return
}
if(!(params.imgPaths instanceof Array)) {
console.log('请传入array类型')
return
} // 校验传入是否为数组
let maxLength = params.imgPaths.length // 传入数组长度
let i = params.subscript?params.subscript:0 // 当前上传图片下标
let successNum = params.successNum?params.successNum:0 // 上传成功数
let failNum = params.failNum?params.failNum:0 // 上传失败数
let resultData = params.resultData?params.resultData:[] // 上传返回的imgUrl
let endData = {} // 成功回调暴露出去的结果
wx.uploadFile({
url: params.uploadUrl,
filePath: params.imgPaths[i],
name: 'test_batchUpload',
headers: {
"Content-Type": "multipart/form-data"
},
formData: {
// 其它参数
},
success(res) { // 返回code为指定结果表示上传成功反之上传失败
if (res.statusCode == 200) {
let data = JSON.parse(res.data)
successNum++
resultData.push(data.url)
}else {
failNum++
}
},
fail(res) {
failNum++
},
complete() {
i++
if(i==maxLength) { // 上传完毕调用成功回调暴露指定数据出去
endData = {
imgPaths:resultData,
successNum:successNum,
failNum: failNum,
}
successFn(endData)
}else{ // 执行下一张上传
params.subscript = i
params.successNum = successNum
params.failNum = failNum
params.resultData = resultData
// console.log(_that,'_that')
callBack(params,callBack,successFn)
}
}
})
}
export {
batchUpload,
}
3, 项目中引用
index.js
import batchUpload form '../util/util.js'
Page({
data:{
showImage:[]
}
uploadImg() {
let that = this
wx.chooseImage({
count: 6,
success(res) {
const tempFilePaths = res.tempFilePaths
let file = tempFilePaths[0];
let params = {
uploadUrl: 'test_url', // 图片上传接口
imgPaths: tempFilePaths
}
batchUpload(params,batchUpload,(res)=>{
let showImage = that.data.showImage
showImage = res.imgPaths
that.setData({
showImage
},()=>{
let msg = '成功上传'+res.successNum+"张,失败"+res.failNum+"张"
wx.showToast({
title:msg
})
})
})
}
})
}
})
4，效果图
[图片上传失败...(image-353ab7-1553483695861)]
[图片上传失败...(image-a789e3-1553483695861)]
5, 其它
a, 批量封装函数中对上传文件大小的监控
b, 加上uploadTask可以实现上传进度的监控
...
