微信小程序同时上传多张图片

1.图片选择后,路径已经存入list中:

data: {  
    images: [], //选择的图片   
  },

2.调用递归上传的方法:

wx.chooseImage({
       var that = this
       count: 9,
       sizeType: ['original', 'compressed'],
       sourceType: ['album', 'camera'],
       success: function(res){            
            var successUp = 0; //成功,初始化为0
            var failUp = 0; //失败,初始化为0
            var length = that.data.images.length; //总共上传的数量
            var count = 0; //第几张,初始化为0
            var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上传的接口
            //调用上传图片的公共函数
            that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length);
       },        
   });

3.递归上传方法:

/**
   * 上传图片:递归的方式上传
   * url:上传地址
   * imgPaths:上传的图片列表
   * successUp:上传成功的个数,初始化为0
   * failUp:上传失败的个数,初始化为0
   * count:第几张
   * length:图片列表的长度
   */
  uploadOneByOne(url, imgPaths, successUp, failUp, count, length) {
    var that = this;
    wx.uploadFile({
      url: url, //上传地址地址
      filePath: imgPaths[count],
      name: "file", //后台接收的文件名
      success: function(e) {
        successUp++; //成功+1
      },
      fail: function(e) {
        failUp++; //失败+1
      },
      complete: function(e) {
        count++; //下一张
        if (count == length) {
          TODO: 上传完毕后跳转页面
          wx.showToast({
            title: '发布成功',
            icon: 'success',
            duration: 2000
          })
        }
        else {
          //递归调用,上传下一张
          that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length);
        }
      }
    })
  },

4.后台接口:

@PostMapping("/uploadImg")
public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) {
    //该接口被多次调用,这里写自己的业务,省略。。。
    return "";
}

文章参考:https://blog.csdn.net/aini2464/article/details/79668511

猜你喜欢

转载自blog.csdn.net/qq_29644709/article/details/87881129