微信小程序開發中怎樣實現圖片上傳

老規矩，直接上代碼了。愛掏網 - it200.com

handleCancelPic() {        let id = this.data.dbId;
        wx.chooseImage({
          count: 3, // 默認9
          sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有          sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
          success: res => {
            // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
            var tempFilePaths = res.tempFilePaths;

            this.setData({
                src: tempFilePaths
            })
            upload(this,tempFilePaths,'','');
          }
        })
    }
然后一個封裝好的方法function upload(page, path,way,id) {
    console.log(path)
  wx.showToast({
    icon: "loading",
    title: "正在上傳"
  });
  var test = [],
    that = this;  for (var i = 0; i        wx.uploadFile({
          url: api.CancelImg,
          filePath: path[i],          
          name: 'file',
          header: { "Content-Type": "multipart/form-data" },
          success: res => {
            test.push(res);
            wx.setStorageSync('cancelImg',test)
            console.log(test)            if (res.statusCode != 200) { 
              wx.showModal({
                title: '提示',
                content: '上傳失敗',
                showCancel: false
              })              return;
            }else {
                wx.showModal({
                    title: '提示',
                    content: '上傳成功',
                    showCancel: false
                }) 
            }
          },
          fail: function (e) {
            console.log(e);
            wx.showModal({
              title: '提示',
              content: '上傳失敗',
              showCancel: false
            })
          },
          complete: function () {
            wx.hideToast();  //隱藏Toast
          }
        })
    }

這個是多個圖片上傳的方法，單個圖片上傳的話，把循環去掉就好。愛掏網 - it200.com主要是因為微信官方默認的就是一次上傳一張圖片這個很蛋疼。愛掏網 - it200.com只能這么搞了。愛掏網 - it200.com。愛掏網 - it200.com。愛掏網 - it200.com

相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！

推薦閱讀：

微信小程序開發容器視圖的使用

微信小程序開發中Android請求失敗如何處理

以上就是微信小程序開發中怎樣實現圖片上傳的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！