小程序怎么實現(xiàn)多圖片上傳

這篇文章主要介紹“小程序怎么實現(xiàn)多圖片上傳”，在日常操作中，相信很多人在小程序怎么實現(xiàn)多圖片上傳問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序怎么實現(xiàn)多圖片上傳”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

小程序開發(fā)之變相實現(xiàn)多圖片上傳新手教程。開發(fā)中總會需要文件上傳的功能(比如圖片上傳)，微信提供了wx.uploadFile(OBJECT)方法，用來將文件上傳至服務(wù)器。

上傳圖片之前自然需要選擇圖片，小程序API -- wx.chooseImage(OBJECT)。就是從本地相冊選擇圖片或者使用相機拍照。

OBJECT參數(shù)說明如下：

wx.chooseImage({
　　count: 9, //最多可以選擇的圖片數(shù)，默認為9
　　sizeType: ['orignal','compressed'], //original 原圖，compressed 壓縮圖，默認二者都有
　　sourceType: ['album', 'camera'], //album 從相冊選圖，camera 使用相機，默認二者都有
　　success: function(){}, //成功則返回圖片的本地文件路徑列表 tempFilePaths
　　fail: function(){}, //接口調(diào)用失敗的回調(diào)函數(shù)
　　complete: function(){} //接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）
})

success返回參數(shù)： tempFilePaths: 圖片的本地文件路徑列表

wx.uploadFile(OBJECT)

wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //開發(fā)者服務(wù)器 url
      filePath: tempFilePaths[0],//要上傳文件資源的路徑
      name: 'file', //文件對應(yīng)的 key , 開發(fā)者在服務(wù)器端通過這個 key 可以獲取到文件二進制內(nèi)容
      formData:{ //HTTP 請求中其他額外的 form data
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })

在chooseImage回調(diào)函數(shù)里調(diào)用上傳方法!

前久，做了一個如上圖的圖片上傳功能!直接上代碼吧：

/* 函數(shù)描述：作為上傳文件時遞歸上傳的函數(shù)體體；
   * 參數(shù)描述： 
   * filePaths是文件路徑數(shù)組
   * successUp是成功上傳的個數(shù)
   * failUp是上傳失敗的個數(shù)
   * i是文件路徑數(shù)組的指標
   * length是文件路徑數(shù)組的長度
   */      
    uploadDIY(filePaths,successUp,failUp,i,length){
      var that = this;
      app.toastShow(0,"圖片上傳中...",20000000,1);
      wx.uploadFile({
          url: '/uploadurl/', 
          filePath: filePaths[i],
          name: 'file',
          formData:{
            'user': 'test'
          },
          success: (res) => {
              successUp++;
              var srcArr = that.data.src;
              srcArr.push(filePaths[i]),
              that.setData({
                src : srcArr
              });
              var data = JSON.parse(res.data);
              var newpicKeys = that.data.picKeys;
              newpicKeys.push(data.data['pic_key']);
              that.setData({
                picKeys: newpicKeys
              });
          },
          fail: (res) => {
              that.setData({
                isuploaderror: 1
              });
              failUp ++;
          },
          complete: () => {
              i ++;                        
              if(i == length){
                wx.hideToast();
                var txt = '總共'+successUp+'張上傳成功,'+failUp+'張上傳失??！';
                app.toastShow(0,txt,2000,1);
              }else{  //遞歸調(diào)用uploadDIY函數(shù)
                  if(that.data.isuploaderror){
                      app.toastShow(0,'圖片上傳失敗，請重新選擇上傳',2000,1);
                  }else{
                      this.uploadDIY(filePaths,successUp,failUp,i,length);
                  }
              }
          }
      });
  },
  uploadImage:function(e){
    var that = this;
    that.setData({
      isuploaderror: 0
    });
    var nowLen = that.data.src.length;
    var remain = 9 - nowLen;
    wx.chooseImage({
        count: remain,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            var successUp = 0; //成功個數(shù)
            var failUp = 0; //失敗個數(shù)
            var length = res.tempFilePaths.length; //總共個數(shù)
            var i = 0; //第幾個
            this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
        },        
    });
  }

因為wx.uploadFile只能單個文件上傳，所以需要變相的實現(xiàn)多文件上傳，即，complete回調(diào)里調(diào)用uploadDIY調(diào)用函數(shù)本身~ 直到i==length!

到此，關(guān)于“小程序怎么實現(xiàn)多圖片上傳”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>