微信小程序多圖上傳功能實現
微信(xin)小程序上傳圖片每次只能上傳一張，所有很多(duo)朋友就會問(wen)想要多(duo)張圖片上傳怎么辦？
首先，我們來看(kan)一看(kan)wx.chooseImage(object)和wx.uploadFile(OBJECT)這兩個(ge)個(ge)api
示(shi)例代(dai)碼(ma)是這樣的(de)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: '//example.weixin.qq.com/upload', //僅(jin)為示(shi)例(li)，非(fei)真實的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } }) } }) |
這里的示例代碼，是選(xuan)擇(ze)圖片，然后上傳選(xuan)中(zhong)(zhong)的圖片中(zhong)(zhong)的第一(yi)個圖片；
現在開(kai)始寫多張圖片上傳(chuan)的例(li)子
首先，我們還是要(yao)選(xuan)擇圖片
|
1 2 3 4 5 6 |
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths;//這里是選(xuan)好(hao)的圖片的地址(zhi)，是一個數(shu)組
} }) |
然后在(zai)(zai)app.js中(zhong)寫一(yi)(yi)個(ge)(ge)多(duo)張(zhang)圖(tu)片上(shang)傳的方(fang)法,后面引入，你(ni)也(ye)可以(yi)寫在(zai)(zai)一(yi)(yi)個(ge)(ge)JS文件中(zhong)，后面引入：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
//多張圖片上(shang)傳(chuan) function uploadimg(data){ var that=this, i=data.i?data.i:0, success=data.success?data.success:0, fail=data.fail?data.fail:0; wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'fileData', formData:null, success: (resp) => { success++; console.log(resp) console.log(i); //這里可能有BUG，失敗也(ye)會執(zhi)行這里 }, fail: (res) => { fail++; console.log('fail:'+i+"fail:"+fail); }, complete: () => { console.log(i); i++; if(i==data.path.length){ //當圖(tu)片傳完(wan)時，停止(zhi)調用 console.log('執行完畢'); console.log('成功：'+success+" 失敗："+fail); }else{//若圖(tu)片還沒有傳(chuan)完，則繼續調用函數(shu) console.log(i); data.i=i; data.success=success; data.fail=fail; that.uploadimg(data); }
} }); } |
多(duo)張(zhang)圖片上(shang)傳(chuan)的方(fang)法寫好(hao)了，下面就是引用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var app=getApp(); Page({ data:{ pics:[] }, choose:function(){//這里(li)是選取圖片(pian)的方法 var that=this; wx.chooseImage({ count: 9-pic.length, // 最多可以選擇的圖片張數(shu)，默認9 sizeType: ['original', 'compressed'], // original 原(yuan)圖(tu)，compressed 壓縮圖(tu)，默認二者都有 sourceType: ['album', 'camera'], // album 從相(xiang)(xiang)冊選圖，camera 使用相(xiang)(xiang)機，默認二者都(dou)有 success: function(res){ var imgsrc=res.tempFilePaths; that.setData({ pics:imgsrc }); }, fail: function() { // fail }, complete: function() { // complete } })
}, uploadimg:function(){//這里觸發圖片上傳(chuan)的(de)方(fang)法 var pics=this.data.pics; app.uploadimg({ url:'//........',//這里(li)是你圖片(pian)上傳(chuan)的接口 path:pics//這里是選取的圖片的地址(zhi)數組 }); }, onLoad:function(options){
}
}) |
