小編給大家分享一下小程序圖片分組上傳的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比羅定網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式羅定網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋羅定地區(qū)。費(fèi)用合理售后完善,十余年實(shí)體公司更值得信賴。在開發(fā)小程中,在一個(gè)項(xiàng)目需求需要上傳多組照片,上傳頁面部分截圖如下:
因?yàn)榉纸M比較多,不可能每一組寫一個(gè)布局,因此使用for循環(huán)進(jìn)行圖片的選擇顯示,首先定義數(shù)據(jù)
fileList: [{ name: "駕駛證", cid:"0", picimage:[], }, { name: "整車外觀", cid: "1", picimage: [], }, { name: "整車銘牌", cid: "2", picimage: [], }, { name: "發(fā)動(dòng)機(jī)全貌", cid: "3", picimage: [], },{ name: "增壓器全貌", cid: "4", picimage: [], }]
頁面布局代碼部分就不貼出了,使用循環(huán)遇到的問題有:1.調(diào)用同一個(gè)wx.chooseImage()會(huì)出現(xiàn)第二章覆蓋第一張;2.所有組同時(shí)沒法區(qū)分。解決辦法:1.當(dāng)選擇圖片時(shí),將圖片concat到數(shù)組中去。2.為每一個(gè)組設(shè)置一個(gè)id,當(dāng)點(diǎn)擊選擇圖片按鈕時(shí)將id傳過去,chooseImage根據(jù)所接收到的id選擇將圖片顯示在哪個(gè)分組,關(guān)鍵代碼如下:
chooseWxImage: function (e) { var _this = this; var id = e.currentTarget.dataset.picid; console.log("id-----" + id) if (_this.data.fileList[id].picimage.length>1){ wx.showModal({ content: '你最多只能選擇2張照片', showCancel:false, }) }else{ wx.chooseImage({ count:2, sizeType: "compressed", sourceType: ['album', 'camera'], success: function (res) { var arr = _this.data.fileList[id].picimage; for (let i in res.tempFilePaths) { arr.push(res.tempFilePaths[i]) } _this.setData({ fileList: _this.data.fileList }) } })} },
上傳部分,因?yàn)樾〕绦蛑荒芤粡堃粡埳蟼?,因此需要?duì)uploading方法進(jìn)行處理,先將所有圖片數(shù)組放到一個(gè)集合中,然后對(duì)集合進(jìn)行遍歷,以數(shù)組為單位進(jìn)行上傳。
upload: function (e) { var that = this; var fileList = that.data.fileList; var tempath = [] ;//圖片地址,將所有圖片數(shù)組放進(jìn)去 for(let i in fileList){ tempath.push(fileList[i].picimage) } console.log("tempimage"+tempath) wx.showLoading({ title: '上傳中...', }) for (let j in tempath) { requestUtil.uploadimg({//uploading為封裝的一個(gè)方法 url: '上傳地址', path: tempath[j],//遍歷地址,將每個(gè)數(shù)組循環(huán)上傳 }) wx.hideLoading(); wx.showToast({ title: '上傳成功!', icon:'success', duration:'2500', }) } } //多張圖片上傳,這部分代碼是參考網(wǎng)上的,使用當(dāng)中遇到一個(gè)bug就是如果傳過來的數(shù)組為空的話,就會(huì)卡死小程序,因此需要加上判斷數(shù)組不能為空 function uploadimg(data) { var that = this, i = data.i ? data.i : 0,//當(dāng)前上傳的哪張圖片 success = data.success ? data.success : 0,//上傳成功的個(gè)數(shù) fail = data.fail ? data.fail : 0;//上傳失敗的個(gè)數(shù) wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'file',//這里根據(jù)自己的實(shí)際情況改 formData: data.formData,//這里是上傳圖片時(shí)一起上傳的數(shù)據(jù) success: (resp) => { if (resp.statusCode == 200) { success++;//圖片上傳成功,圖片上傳成功的變量+1 console.log(resp) console.log(i); } }, fail: (res) => { fail++;//圖片上傳失敗,圖片上傳失敗的變量+1 console.log(data.path) console.log('fail:' + i + "fail:" + fail); }, complete: () => { console.log(i); i++;//這個(gè)圖片執(zhí)行完上傳后,開始上傳下一張 if (i == data.path.length) { //當(dāng)圖片傳完時(shí),停止調(diào)用 console.log('執(zhí)行完畢'); console.log('成功:' + success + " 失敗:" + fail); } else {//若圖片還沒有傳完,則繼續(xù)調(diào)用函數(shù) console.log(i); data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); } } }); }
以上是“小程序圖片分組上傳的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文題目:小程序圖片分組上傳的方法-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://m.rwnh.cn/article40/psdho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容