上傳圖片在項(xiàng)目中屬于一個(gè)常見場(chǎng)景。在小程序中同樣遇到了這樣的需求。如何去解決呢？
利用wx.chooseImage()，wx.uploadFile()兩個(gè)接口即可完成小程序的批量上傳圖片。
1, 知己知彼，百戰(zhàn)不殆（先來(lái)瞅瞅這兩個(gè)api的主要參數(shù)）
wx.chooseImage()
從本地相冊(cè)選擇圖片或使用相機(jī)拍照。
主要參數(shù)：
count：控制選擇圖片張數(shù)至多9張；
sizeType： 選擇圖片尺寸（壓縮：compressed or 原圖：original）；
sourceType： 圖片來(lái)源（相冊(cè)：album or 拍照：camera）
wx.uploadFile()
將本地資源上傳到服務(wù)器。客戶端發(fā)起一個(gè) HTTPS POST 請(qǐng)求，其中 content-type 為 multipart/form-data
主要參數(shù)：
url： 圖片上傳接口；
filePath： 上傳資源路徑（string）;
name: 文件對(duì)應(yīng)的 key,(與后臺(tái)接口約定的key);
wx.chooseImage成功返回值res.tempFilePaths為所選資源路徑數(shù)組
wx.uploadFile的filePath入?yún)⒈仨殲閟tring且是生效的資源路徑方能上傳成功，故需要采用遞歸的方法循環(huán)調(diào)用方能實(shí)現(xiàn)批量上傳。
2, 工欲善其事必先利其器（進(jìn)行批量上傳的封裝）
util.js
/*
* 批量上傳函數(shù)
* @params {*} params 上傳入?yún)?duì)象
* @params {Function} callbackFn 循環(huán)回調(diào)函數(shù)
* @params {Function} successFn 成功回調(diào)函數(shù)
*/
const batchUpload = (params,callBack,successFn) => {
if(!params.uploadUrl) {
console.log('請(qǐng)傳入上傳地址')
return
}
if(!(params.imgPaths instanceof Array)) {
console.log('請(qǐng)傳入array類型')
return
} // 校驗(yàn)傳入是否為數(shù)組
let maxLength = params.imgPaths.length // 傳入數(shù)組長(zhǎng)度
let i = params.subscript?params.subscript:0 // 當(dāng)前上傳圖片下標(biāo)
let successNum = params.successNum?params.successNum:0 // 上傳成功數(shù)
let failNum = params.failNum?params.failNum:0 // 上傳失敗數(shù)
let resultData = params.resultData?params.resultData:[] // 上傳返回的imgUrl
let endData = {} // 成功回調(diào)暴露出去的結(jié)果
wx.uploadFile({
url: params.uploadUrl,
filePath: params.imgPaths[i],
name: 'test_batchUpload',
headers: {
"Content-Type": "multipart/form-data"
},
formData: {
// 其它參數(shù)
},
success(res) { // 返回code為指定結(jié)果表示上傳成功反之上傳失敗
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) { // 上傳完畢調(diào)用成功回調(diào)暴露指定數(shù)據(jù)出去
endData = {
imgPaths:resultData,
successNum:successNum,
failNum: failNum,
}
successFn(endData)
}else{ // 執(zhí)行下一張上傳
params.subscript = i
params.successNum = successNum
params.failNum = failNum
params.resultData = resultData
// console.log(_that,'_that')
callBack(params,callBack,successFn)
}
}
})
}
export {
batchUpload,
}
3, 項(xiàng)目中引用
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, 批量封裝函數(shù)中對(duì)上傳文件大小的監(jiān)控
b, 加上uploadTask可以實(shí)現(xiàn)上傳進(jìn)度的監(jiān)控
...
