小程序如何同时上传多张图片?

小木
  • 295

现在上传比如9张照片,要向服务端发送9次,服务端要等待全部上传完才能处理,有没有让小程序一次同时上传多张图片方法。

回复
阅读 15.8k
5 个回答

好明显微信只提供一个上传图片的方法,而且是一张图片的上传的。
但多图片上传的原理可以是多个一张图片上传啊。
可以使用Promise.all封装下上传的任务。全部处理完再返回

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', //仅为示例,非真实的接口地址
                  filePath: files[i],
                  success: function(res){
                    resolve(res)
                  }
                })
          })
          
        }
        
        Promise.all(uploads).then((result)=>{
            resolve(result)
          })
Au异想天不开
  • 3
新手上路,请多包涵

元素上bindtap方法:(选择图片)
chooseImgHandler: function (e) {

var that = this;
that.count_img = count_img; //允许上传的图片数目
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('已达到上传图片上限啦~');
  that.isClicking = false;
}

},
//拿到用户选择的图片的临时文件路径数组以后,循环上传到自己的服务器
//上传多图
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: '自己服务器的地址',
  filePath: data[i],
  name: 'file',
  formData: {服务器需要接受的参数},
  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 {
       //成功后的回调
       //自己的事件方法
        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) {   //当图片传完时,停止调用          
      console.log('执行完毕');
      console.log('成功:' + success + " 失败:" + fail);
      that.isClicking = false;
    } else {//若图片还没有传完,则继续调用函数
      data.i = i;
      data.success = success;
      data.fail = fail;
      that.uploadimg(data);
    }
  }
});

},

我用的是
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=> {
}

})

请问你如何做的呢

formData 多次提交怎么办?(上传N张图片,数据库就多了N条记录)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏