|
作者：加菲貓，來(lái)自原文地址
開(kāi)發(fā)中總會(huì)需要文件上傳的功能（比如圖片上傳），微信提供了wx.uploadFile(OBJECT)方法，用來(lái)將文件上傳至服務(wù)器。
上傳圖片之前自然需要選擇圖片，小程序API -- wx.chooseImage(OBJECT)。就是從本地相冊(cè)選擇圖片或者使用相機(jī)拍照。
OBJECT參數(shù)說(shuō)明如下：
-
wx.chooseImage({
-
-
count: 9, //最多可以選擇的圖片數(shù)，默認(rèn)為9
-
-
sizeType: ['orignal','compressed'], //original 原圖，compressed 壓縮圖，默認(rèn)二者都有
-
-
sourceType: ['album', 'camera'], //album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有
-
-
success: function(){}, //成功則返回圖片的本地文件路徑列表 tempFilePaths
-
-
fail: function(){}, //接口調(diào)用失敗的回調(diào)函數(shù)
-
-
complete: function(){} //接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
-
})
success返回參數(shù)： tempFilePaths: 圖片的本地文件路徑列表
wx.uploadFile(OBJECT)
-
wx.uploadFile({
-
url: 'http://example.weixin.qq.com/upload', //開(kāi)發(fā)者服務(wù)器 url
-
filePath: tempFilePaths[0],//要上傳文件資源的路徑
-
name: 'file', //文件對(duì)應(yīng)的 key , 開(kāi)發(fā)者在服務(wù)器端通過(guò)這個(gè) key 可以獲取到文件二進(jìn)制內(nèi)容
-
formData:{ //HTTP 請(qǐng)求中其他額外的 form data
-
'user': 'test'
-
},
-
success: function(res){
-
var data = res.data
-
//do something
-
}
-
})
在chooseImage回調(diào)函數(shù)里調(diào)用上傳方法！
前久，做了一個(gè)如上圖的圖片上傳功能！直接上代碼吧：
-
/* 函數(shù)描述：作為上傳文件時(shí)遞歸上傳的函數(shù)體體；
-
* 參數(shù)描述：
-
* filePaths是文件路徑數(shù)組
-
* successUp是成功上傳的個(gè)數(shù)
-
* failUp是上傳失敗的個(gè)數(shù)
-
* i是文件路徑數(shù)組的指標(biāo)
-
* length是文件路徑數(shù)組的長(zhǎng)度
-
*/
-
uploadDIY(filePaths,successUp,failUp,i,length){
-
var that = this;
-
app.toastShow(0,"圖片上傳中...",20000000,1);
-
wx.uploadFile({
-
url: '/uploadurl/',
-
filePath: filePaths[i],
-
name: 'file',
-
formData:{
-
'user': 'test'
-
},
-
success: (res) => {
-
successUp++;
-
var srcArr = that.data.src;
-
srcArr.push(filePaths[i]),
-
that.setData({
-
src : srcArr
-
});
-
-
var data = JSON.parse(res.data);
-
var newpicKeys = that.data.picKeys;
-
newpicKeys.push(data.data['pic_key']);
-
that.setData({
-
picKeys: newpicKeys
-
});
-
},
-
fail: (res) => {
-
that.setData({
-
isuploaderror: 1
-
});
-
failUp ++;
-
},
-
complete: () => {
-
i ++;
-
if(i == length){
-
wx.hideToast();
-
var txt = '總共'+successUp+'張上傳成功,'+failUp+'張上傳失??！';
-
app.toastShow(0,txt,2000,1);
-
}else{ //遞歸調(diào)用uploadDIY函數(shù)
-
if(that.data.isuploaderror){
-
app.toastShow(0,'圖片上傳失敗，請(qǐng)重新選擇上傳',2000,1);
-
}else{
-
this.uploadDIY(filePaths,successUp,failUp,i,length);
-
}
-
}
-
}
-
});
-
},
-
uploadImage:function(e){
-
var that = this;
-
that.setData({
-
isuploaderror: 0
-
});
-
var nowLen = that.data.src.length;
-
var remain = 9 - nowLen;
-
wx.chooseImage({
-
count: remain,
-
sizeType: ['original', 'compressed'],
-
sourceType: ['album', 'camera'],
-
success: (res) => {
-
var successUp = 0; //成功個(gè)數(shù)
-
var failUp = 0; //失敗個(gè)數(shù)
-
var length = res.tempFilePaths.length; //總共個(gè)數(shù)
-
var i = 0; //第幾個(gè)
-
this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
-
},
-
});
-
}
因?yàn)閣x.uploadFile只能單個(gè)文件上傳，所以需要變相的實(shí)現(xiàn)多文件上傳，即，complete回調(diào)里調(diào)用uploadDIY調(diào)用函數(shù)本身~ 直到i==length!
|
