微信小程序多張圖片上傳
阿新 • • 發佈:2017-06-07
let type 程序 nal pre 圖片 知識 地址 bug
微信小程序上傳圖片每次只能上傳一張,所有很多朋友就會問想要多張圖片上傳怎麽辦?
首先,我們來看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)這兩個個api
示例代碼是這樣的:
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: ‘http://example.weixin.qq.com/upload‘, //僅為示例,非真實的接口地址 filePath: tempFilePaths[0], name:‘file‘, formData:{ ‘user‘: ‘test‘ }, success: function(res){ var data = res.data //do something } }) } })
這裏的示例代碼,是選擇圖片,然後上傳選中的圖片中的第一個圖片;
現在開始寫多張圖片上傳的例子
首先,我們還是要選擇圖片
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths;//這裏是選好的圖片的地址,是一個數組 } })
然後在app.js中寫一個多張圖片上傳的方法,後面引入,你也可以寫在一個JS文件中,後面引入:
//多張圖片上傳 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,失敗也會執行這裏 }, fail: (res) => { fail++; console.log(‘fail:‘+i+"fail:"+fail); }, complete: () => { console.log(i); i++; if(i==data.path.length){ //當圖片傳完時,停止調用 console.log(‘執行完畢‘); console.log(‘成功:‘+success+" 失敗:"+fail); }else{//若圖片還沒有傳完,則繼續調用函數 console.log(i); data.i=i; data.success=success; data.fail=fail; that.uploadimg(data); } } }); }
多張圖片上傳的方法寫好了,下面就是引用:
var app=getApp(); Page({ data:{ pics:[] }, choose:function(){//這裏是選取圖片的方法 var that=this; wx.chooseImage({ count: 9-pic.length, // 最多可以選擇的圖片張數,默認9 sizeType: [‘original‘, ‘compressed‘], // original 原圖,compressed 壓縮圖,默認二者都有 sourceType: [‘album‘, ‘camera‘], // album 從相冊選圖,camera 使用相機,默認二者都有 success: function(res){ var imgsrc=res.tempFilePaths; that.setData({ pics:imgsrc }); }, fail: function() { // fail }, complete: function() { // complete } }) }, uploadimg:function(){//這裏觸發圖片上傳的方法 var pics=this.data.pics; app.uploadimg({ url:‘https://........‘,//這裏是你圖片上傳的接口 path:pics//這裏是選取的圖片的地址數組 }); }, onLoad:function(options){ } })
完結。
想了解更多的小程序的知識請添加微信小程序開發交流群:368506119
微信小程序多張圖片上傳