小程序圖片分組上傳的方法-創(chuàng)新互聯(lián)

小編給大家分享一下小程序圖片分組上傳的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比羅定網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式羅定網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋羅定地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

在開發(fā)小程中，在一個項目需求需要上傳多組照片，上傳頁面部分截圖如下：

因為分組比較多，不可能每一組寫一個布局，因此使用for循環(huán)進行圖片的選擇顯示，首先定義數(shù)據(jù)

fileList: [{
      name: "駕駛證",
      cid:"0",
      picimage:[],
    }, {
        name: "整車外觀",
        cid: "1",
        picimage: [],
      }, {
        name: "整車銘牌",
        cid: "2",
        picimage: [],
    }, {
        name: "發(fā)動機全貌",
        cid: "3",
        picimage: [],
    },{
        name: "增壓器全貌",
        cid: "4",
        picimage: [],
    }]

頁面布局代碼部分就不貼出了，使用循環(huán)遇到的問題有：1.調(diào)用同一個wx.chooseImage()會出現(xiàn)第二章覆蓋第一張；2.所有組同時沒法區(qū)分。解決辦法：1.當(dāng)選擇圖片時，將圖片concat到數(shù)組中去。2.為每一個組設(shè)置一個id，當(dāng)點擊選擇圖片按鈕時將id傳過去，chooseImage根據(jù)所接收到的id選擇將圖片顯示在哪個分組，關(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
        })
      }
    })}
  },

上傳部分，因為小程序只能一張一張上傳，因此需要對uploading方法進行處理，先將所有圖片數(shù)組放到一個集合中，然后對集合進行遍歷，以數(shù)組為單位進行上傳。

upload: function (e) {
    var that = this;
    var fileList = that.data.fileList;
    var tempath = [] ;//圖片地址，將所有圖片數(shù)組放進去
    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為封裝的一個方法
          url: '上傳地址',
          path: tempath[j],//遍歷地址，將每個數(shù)組循環(huán)上傳
          })
      wx.hideLoading();
      wx.showToast({
        title: '上傳成功！',
        icon:'success',
        duration:'2500',
      })
      }
    }






//多張圖片上傳，這部分代碼是參考網(wǎng)上的，使用當(dāng)中遇到一個bug就是如果傳過來的數(shù)組為空的話，就會卡死小程序，因此需要加上判斷數(shù)組不能為空
function uploadimg(data) {
	var that = this,
		i = data.i ? data.i : 0,//當(dāng)前上傳的哪張圖片
		success = data.success ? data.success : 0,//上傳成功的個數(shù)
		fail = data.fail ? data.fail : 0;//上傳失敗的個數(shù)
	wx.uploadFile({
		url: data.url,
		filePath: data.path[i],
		name: 'file',//這里根據(jù)自己的實際情況改
		formData: data.formData,//這里是上傳圖片時一起上傳的數(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++;//這個圖片執(zhí)行完上傳后，開始上傳下一張
			if (i == data.path.length) {   //當(dāng)圖片傳完時，停止調(diào)用          
				console.log('執(zhí)行完畢');
				console.log('成功：' + success + " 失?。?quot; + 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)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：小程序圖片分組上傳的方法-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://muchs.cn/article40/psdho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、動態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)