微信小程序 多图片上传

背景需求

选择图片，点击提交会向后台发送图片信息（主要是图片路径）和其他字段（联系人和联系电话），因为上传图片需要走一次后台，点击提交还要做一次后台，所以点击提交需要在所有图片上传到服务器之后才能提交。

解决方案

1、在当前页面添加img_sussess_number属性，表示已经上传多少张图片到服务器
2、上传一张图片img_sussess_number自增
3、如果img_sussess_number等于图片总数，则执行提交按钮事件

PS：通过回调函数来解决

部分代码

// 上传图片
  upLoadImg: function (callback) {
    let that = this;
    // 上传图片到后台
    for (let path of that.data.files) {
      wx.uploadFile({
        url: baseUrl + 'rescse/upload',
        filePath: path,
        name: 'file',
        header: {
          "content-type": "multipart/form-data" //记得设置
        },
        formData: {
          'user': 'test'
        },
        success(res) {
          let resData = JSON.parse(res.data);

          let temp_name = resData.data.FILE_NAME;
          let temp_path = resData.data.FILE_PATH;

          if (that.data.info.img_name == "" && that.data.info.img_path == "") {
            that.data.info.img_name = temp_name;
            that.data.info.img_path = temp_path;
          } else if (that.data.info.img_name != "" && that.data.info.img_path != "") {
            that.data.info.img_name = that.data.info.img_name + "," + temp_name;
            that.data.info.img_path = that.data.info.img_path + "," + temp_path;
          }

          let img_sussess_number = that.data.img_sussess_number;
          img_sussess_number++;

          that.setData({
            img_sussess_number: img_sussess_number,
            info: that.data.info
          })
          // 如果所有图片上传完成
          if (that.data.img_sussess_number == that.data.files.length) {
            callback();
          }

        }
      })
    }
  },

  // 提交信息
  formSubmit: function (e) {
    let that = this;

    let length = that.data.files.length;
    let value = e.detail.value;

    that.upLoadImg(function () {
      let info = that.data.info;
      // 去掉字符串前后空格后将数据传到后台
      info.latitude = info.latitude.trim();
      info.longitude = info.longitude.trim();
      info.contact = value.contact.trim();
      info.phoneNumber = value.phoneNumber.trim();
      info.description = value.description.trim();

      // 非空校验
      if (info.contact == "" || info.phoneNumber == "") {
        wx.showModal({
          title: '提示',
          content: '请输入联系人信息'
        })
        return false;
      }

      // 手机号码格式校验
      if (info.phoneNumber != "") {
        let phoneNumberReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if (!phoneNumberReg.test(info.phoneNumber)) {
          wx.showModal({
            title: '提示',
            content: '手机号码格式错误'
          })
          return false;
        }
      }

      // 判断是否有重复提交的图片（懒得改了，先这样，不写的话第一张会重复）
      let img_path = info.img_path.split(",");
      var imgs = img_path.filter(function (element, index, self) {
        return self.indexOf(element) === index;
      });

      // 发送其余数据到后台
      wx.request({
        url: baseUrl + 'rescse/insert',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          latitude: that.data.info.latitude,
          longitude: that.data.info.longitude,
          contacts: that.data.info.contact,
          contactsnumber: that.data.info.phoneNumber,
          describename: that.data.info.description,
          picturename: that.data.info.img_name,
          picture: imgs.join(","),
          openId: wx.getStorageSync("openId")
        },
        success: function (res) {
          wx.navigateTo({
            url: '../applyback/applyback'
          })
          wx.hideLoading();
        }
      })
    });
    wx.showLoading({
      title: '正在提交',
      mask: true
    });
  },

PS：这个问题有点像操作系统竞争资源的问题，这种解决方案暂时没出现bug，虽然js是单线程，但是不知道js里边有没有锁机制，为什么这么说呢？加入我上传了5张图片，其中有两张图片同时上传完成，同时对img_sussess_number进行操作，那么就会出错了，有懂的希望大神指点一下。