（小程序）多个参数上传服务器

第二篇技术文档

实验项目：QQ小程序

图片和其他参数一起上传服务器问题

小程序与后台的交互要调用wx.request()接口，但同时还要与图片一起传，并且在传图片的同时还要将活动id和这是第几张图片对应的数字一起上传，开始我们在想怎么一次把它上传了，但发现这样做不太好，会很慢，所以最终采取分开异步上传的方式。主要代码如下：

//选择图片
ChooseImage() {
    wx.chooseImage({
      count: 9, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },
  //预览图片
  ViewImage(e) {
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  //删除图片
  DelImg(e) {
    this.data.imgList.splice(e.currentTarget.dataset.index, 1);
    this.setData({
      imgList: this.data.imgList
    })
  },

//第一部分
wx.request({
        data: {
          title: that.data.title,
          idea_text: that.data.text,
          user_id: app.globalData.userid,
          organizationid_list: orglist
        },
        url: '与服务器的接口',
        success: function (res) {
          let idea_id = res.data;
          wx.hideLoading();
          that.submitImages(idea_id);
          wx.navigateBack();
        },
        fail: function (res) {
        },
      });
    }
  },

上传图片的代码如下：

submitImages(idea_id) {
    let that = this;
    console.log(that.data.imgList);
    for (let i = 0; i < that.data.imgList.length; i++) {
      wx.uploadFile({
        url: '与服务器的接口',
        filePath: that.data.imgList[i],
        name: 'imagefile',
        //在上传图片得同时传的参数如下，使用formData（）即可
        formData: {
          idea_id: idea_id,
          count: i,
        },
        success(res) {
          console.log('图片发布成功')
        },
        fail() {
          console.log('上传图片失败');
        }
      })
    }
    wx.showToast({
      title: '发布成功',
      icon: 'success',
      duration: 1000,
      mask: true,
    })
  },

这样即可满足要求，但是上传图片的同时是调用的微信的接口wx.upload（）接口，这个有一个问题，就是有时在上传多张图片是会有部分图片上传失败，错误显示是一次性上传的太多了，超过上传最大上限，这个问题不是经常遇到，查了解决办法，建议用递归而不是循环！！！

更改后如下：

submitImages(filePaths, successUp, failUp, i, length,idea_id) {
    wx.uploadFile({
      url: '与服务器的接口',
      filePath: that.data.imgList[i],
      name: 'imagefile',
      formData: {
          idea_id: idea_id,
          count: i,
      },
      success: (res) => {
        var data = JSON.parse(res.data);
        // 把获取到的路径存入imagesurl字符串中
        this.data.imagesurl
        this.setData({
          imagesurl: this.data.imagesurl.concat(data.data)
        })
      },
      fail: (res) => {
      },
      complete: () => {
        i++;
        if (i == length) {
          console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
        } else { 
        //递归调用
          this.uploadDIY(filePaths, successUp, failUp, i, length,idea_id);
        }
      },
    });

其他地方的交互都与此类似，这个理解通了，万变不离其宗，就会使用了。

附上微信开发者文档wx.request接口知识点链接，供参考使用：
微信开发者文档

最后！希望一起进步！！！