鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 小程序如何同時上傳多張圖片?

小程序如何同時上傳多張圖片?

現(xiàn)在上傳比如9張照片,要向服務(wù)端發(fā)送9次,服務(wù)端要等待全部上傳完才能處理,有沒有讓小程序一次同時上傳多張圖片方法。

回答
編輯回答
純妹

元素上bindtap方法:(選擇圖片)
chooseImgHandler: function (e) {

var that = this;
that.count_img = count_img; //允許上傳的圖片數(shù)目
if (that.isGoing) return;
that.isGoing = true;
if (count_img) {
  wx.chooseImage({
    count: count_img,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      var tempFilePaths = res.tempFilePaths;
      wx.showLoading();
      that.uploadimg(tempFilePaths);
    },
    fail: function () {
      // App.serverErrorTip("圖片選擇失敗...");
      that.isGoing = false;
    }
  })
} else {
  App.serverErrorTip('已達(dá)到上傳圖片上限啦~');
  that.isClicking = false;
}

},
//拿到用戶選擇的圖片的臨時文件路徑數(shù)組以后,循環(huán)上傳到自己的服務(wù)器
//上傳多圖
uploadimg: function (data) {

var that = this,
  zero = 0,
  i = data.i ? data.i : zero,
  success = data.success ? data.success : zero,
  fail = data.fail ? data.fail : zero,
  count_img = that.count_img;
wx.uploadFile({
  url: '自己服務(wù)器的地址',
  filePath: data[i],
  name: 'file',
  formData: {服務(wù)器需要接受的參數(shù)},
  success: function (resp) {
    if (resp.statusCode == 200) {
      if (!resp.data || resp.data.indexOf("errcode") != -1) {
        var msg = "";
        try {
          var json = eval("(" + resp.data + ")");
          msg = '上傳圖片失敗:' + json.errmsg;
        } catch (e) {
          msg = '上傳圖片失敗'
        }
        that.wetoast.toast({
          title: msg,
          duration: 3000
        })
        fail++;
        wx.hideLoading();
      } else {
       //成功后的回調(diào)
       //自己的事件方法
        that.count_img = count_img;
        if (i == (data.length - 1)) {
          wx.hideLoading();
        }
      }
    } else {
      if (i == (data.length - 1)) {
        wx.hideLoading();
      }
      App.serverErrorTip('上傳圖片失敗');
    }
  },
  fail: function (res) {
    fail++;
    if (i == (data.length - 1)) {
      wx.hideLoading();
    }
  },
  complete: function () {
    i++;
    if (i == data.length) {   //當(dāng)圖片傳完時,停止調(diào)用          
      console.log('執(zhí)行完畢');
      console.log('成功:' + success + " 失敗:" + fail);
      that.isClicking = false;
    } else {//若圖片還沒有傳完,則繼續(xù)調(diào)用函數(shù)
      data.i = i;
      data.success = success;
      data.fail = fail;
      that.uploadimg(data);
    }
  }
});

},

2017年1月8日 01:24
編輯回答
瘋浪

好明顯微信只提供一個上傳圖片的方法,而且是一張圖片的上傳的。
但多圖片上傳的原理可以是多個一張圖片上傳啊。
可以使用Promise.all封裝下上傳的任務(wù)。全部處理完再返回

var files=[圖片1,圖片2,圖片3]
var uploads=[];
for(var i=0;i<files.length;i++){
          uploads[i]=new Promise((resolve,reject)=>{
            wx.uploadFile({
                  url: 'https://example.weixin.qq.com/upload', //僅為示例,非真實(shí)的接口地址
                  filePath: files[i],
                  success: function(res){
                    resolve(res)
                  }
                })
          })
          
        }
        
        Promise.all(uploads).then((result)=>{
            resolve(result)
          })
2018年3月2日 03:34
編輯回答
帥到炸

我用的是
let img_upload = (url, path) => {
return new Promise((resolve, rej) => {

wx.uploadFile({
  url: url,
  filePath: path,
  name: 'filename',
  success: function (res) { resolve(res) },
  fail: function () {
    wx.showToast({
      title: '上傳失敗',
      icon: 'none'
    })
  }
})

})
}

使用
img().then((res) => {

res.tempFilePaths.forEach(el=> {
}

})

2017年9月8日 05:47