微信小程式實現多張圖片上傳功能
阿新 • • 發佈:2020-11-19
本文例項為大家分享了微信小程式實現多張圖片上傳的具體程式碼,供大家參考,具體內容如下
Page({ /** * 頁面的初始資料 */ data: { pics: [],count: 9,//上傳圖片最大數量 // showImgUrl: "",//路徑拼接,一般上傳返回的都是檔名, uploadImgUrl: 'https://xxx/UploadHandler.ashx',//圖片的上傳的路徑 detailPics: [],//上傳的結果圖片集合 },selectimages() { var that = this; var detailPics = that.data.detailPics; if (detailPics.length >= that.data.count) { wx.showToast({ title: '最多選擇' + that.data.count + '張!',}) return; } wx.chooseImage({ count: that.data.count,// 最多可以選擇的圖片張數,預設9 sizeType: ['original','compressed'],// original 原圖,compressed 壓縮圖,預設二者都有 sourceType: ['album','camera'],// album 從相簿選圖,camera 使用相機,預設二者都有 success: function(res) { var imgs = res.tempFilePaths; for (var i = 0; i < imgs.length; i++) { that.data.pics.push(imgs[i]) } that.setData({ pics: that.data.pics }) console.log(that.data.pics) that.uploadimg({ url: that.data.uploadImgUrl,//這裡是你圖片上傳的介面 path: that.data.pics,//這裡是選取的圖片的地址陣列 }); },}) },//多張圖片上傳 uploadimg: function(data) { wx.showLoading({ title: '上傳圖片中...',mask: true,}) 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) => { wx.hideLoading(); success++; var str = resp.data //返回的結果,可能不同專案結果不一樣 var pic = JSON.parse(str); var pic_name = pic.url; var detailPics = that.data.detailPics; detailPics.push(pic_name) that.setData({ detailPics: detailPics }) },fail: (res) => { fail++; console.log('fail:' + i + "fail:" + fail); },complete: () => { i++; if (i == data.path.length) { //當圖片傳完時,停止呼叫 that.send() console.log('執行完畢'); console.log('成功:' + success + " 失敗:" + fail); var myEventDetail = { picsList: that.data.detailPics } // detail物件,提供給事件監聽函式 var myEventOption = {} // 觸發事件的選項 that.triggerEvent('myevent',myEventDetail,myEventOption) //結果返回呼叫的頁面 } else { //若圖片還沒有傳完,則繼續呼叫函式 data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); //遞迴,回撥自己 } } }); },})
效果圖:
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。