小程序-擴展能力圖片上傳Uploader組件

微信小程序中有一些擴展組件可以用，例如其中的圖片上傳組件，不論樣式還是上傳時的動畫，都比較好，在使用過程中也遇到了一些問題，在這記錄一下，也期望能讓后來用的人少走彎路。

第一步，首先訪問網址，https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html，下載你需要的組件到程序中，需要下載這uploader，cells，cells三個。

第二步，看https://developers.weixin.qq.com/miniprogram/dev/extended/weui/uploader.html 上傳組件的文檔，在你要用的模塊中的json文件中寫入這是三個，在pages下新建個components文件夾，把下載的組件放進去

 

 

 

第三步，使用，按照文檔，ctrl+v就可以了，

需要注意的是，

 

 

 上傳的方法，在upload中上傳圖片的時候，需要調用，

 

 

在組件上傳中，，其中resolve就是上傳圖片成功后，需要調用resolve(object)，就走到了，如果上傳失敗，就調用reject(object),就走到了失敗的方法，這其中需要注意的是，Promise的callback里面必須resolve({urls})表示成功，  就是你上傳圖片到后台后，返回的圖片地址object對象,對象中是個“urls”數組，一定要是數組， 這樣調用reject(object)才能走到成功的方法，不然即使你上傳成功了，沒有返回數組，還是認為你失敗，

 

 

 

 

 

這是一個需要注意的問題，另外，一次上傳多張時，也有需要注意的地方，如果你的上傳方法，一次可以上傳多張，返回一個數組，或者你可以拼接組裝一個數組，那最好了，直接在上傳成功的回調中，直接resolve({urls})就可以了，

但是如果你的上傳方法只能一次傳一張，那就需要注意了，我們需要循環來上傳。下面就是我的循環上傳的方法

 uplaodFile(files) {
    console.log('upload files', files)
    // 文件上傳的函數，返回一個promise
    return new Promise((resolve, reject) => {
      var tempFilePaths = files.tempFilePaths;
      //上傳返回值
      var app = getApp();
      var that = this;
      that.setData({
        urlArr: [], //這用來存放上傳多張時的路徑數組
      });
      var object = {};
      for (var i = 0; i < tempFilePaths.length; i++) {
        const upload_task = wx.uploadFile({
          // 模擬https
          url: app.globalData.uploadUrl, //需要用HTTPS，同時在微信公眾平台后台添加服務器地址  
          filePath: files.tempFilePaths[i], //上傳的文件本地地址    
          name: 'file',
          //附近數據，這里為路徑     
          success: function(res) {
            var images = that.data.images;
            var data = JSON.parse(res.data);
            if (data.status == "ok") {
              var url = data.url
              that.setData({
                urlArr: that.data.urlArr.concat(app.globalData.zzbHttp + url), //拼接多個路徑到數組中
              });
              object['urls'] = that.data.urlArr;
              that.setData({
                images: images + data.url + ";", //images用來存放路徑字符串，保存到數據庫中的是這個，用“;”分割，但是返回的路徑沒有“;”，就自己拼上了
              });
              console.log("urlArr:" + that.data.urlArr.length + ";;" + (tempFilePaths.length))
              console.log(that.data.images);
              if (that.data.urlArr.length == tempFilePaths.length) { 35  resolve(object) //這就是判斷是不是最后一張已經上傳了，用來返回， 36  } 37             } else {
              reject(res)
            }
          },
          fail: function(err) {
            console.log(err)
          }
        })
      }
    })
  }

基本上就這些需要注意的點。