小程序之图片上传

不管是微信小程序还是支付宝小程序，上传图片的时候都只能单张上传，当遇到复杂的应用场景时，比如下面这种情况：

在一个页面中，有A、B、C三个模块，每个模块都可以选择多张图片，而且必须要在点击 上传图片 按钮之后才把图片上传给后台服务器，最后就是提交成功之后，可以再次进行编辑，就是说在已经上传过图片之后，还可以在已有图片的基础上进行图片添加，继续上传！
那么在做这个需求的时候我们会遇到几个问题：

1.0：假如A模块选择了3张图片；B模块选择了4张图片；C模块选择了5张图片，一次性全部上传，怎么知道上传的这张图片是属于A、B还是C
2.0：假如上面1.0的问题解决了，图片上传成功，我需要进行第二次编辑，重新打开这个页面的时候会看到，A模块已经有3张图片，B模块已经有4张图片，C模块已经有5张图片，于是我删除了A模块的1张图片，删除了B模块的2张图片，删除了C模块的3张图片，然后重新给A模块选择了3张新图片，给B模块选择了4张新图片，给C模块选择了5张新图片，然后重新上传图片！这个时候要知道对应模块删除图片的位置，还需要知道对应模块，哪些图片是已经上传过的，不需要继续上传，哪些图片是新图片需要重新上传的！

带着上面两个问题，我们下面进行需求开发，以微信小程序为列：
1.0首先我们要进行前端页面结构的书写，为了考虑复用性，所以如下面：

页面结构样式

<template name=\'upLoadImg\'>
  <view class=\'upLoadImg_photos\'> 
    <view class=\'upLoadImg_title\'> 
      <text>{{title}} text> 
    view>
    <view class=\'upLoadImg_selectImgs\'>
      <block wx:for="{{data}}" wx:key="{{index}}">
        <view class="upLoadImg_box" data-index="{{index}}" data-type=\'{{type}}\' bindtap=\'previewImage\' >
          <image class=\'upLoadImg_missionImg\' src=\'{{item}}\'>image>
          <image class=\'upLoadImg_delImg\' catchtap=\'delImg\' src=\'/img/CRM/icon_del@2x.png\' data-index="{{index}}" data-type=\'{{type}}\'>image>
        view>
      block>
      <view  bindtap=\'chooseImage\'  class=\'upLoadImg_chooseImage {{(data.length-1) % 4 == 0 ? "upLoadImg_chooseBox" : ""}}\' data-type=\'{{type}}\'>+view>
    view> 
  view>
template>

<template is=\'upLoadImg\' data=\'{{title:"A模块 ",data:a_img,type:"a_img"}}\' />
<template is=\'upLoadImg\' data=\'{{title:"B模块 ",data:b_img,type:"b_img"}}\' />
<template is=\'upLoadImg\' data=\'{{title:"C模块 ",data:c_img,type:"c_img"}}\' />

<view class=\'taskButtom\' bindtap=\'btnSave\' >上传图片view>

css样式

.upLoadImg_photos{
  width:100%;
  padding:39rpx 30rpx 40rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid  rgba(230, 230, 230, 1)
}
.upLoadImg_title{
  font-size:28rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
}
.upLoadImg_title>text:last-child{
  font-size: 26rpx;
}

.upLoadImg_selectImgs{
  display: flex;
  flex-wrap:wrap;
  width: 100%;
}
.upLoadImg_box{
  width:140rpx;
  height:140rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin:39rpx 42rpx 0 0;
  text-align: center;
  border: 2rpx solid #f5f5f5;
  position: relative;
  border-radius:25rpx;
}
.upLoadImg_box:nth-of-type(4n),.upLoadImg_chooseBox{
  margin:39rpx  0 0 !important;
}
.upLoadImg_missionImg{
  width: 140rpx;
  height: 140rpx;
}
.upLoadImg_chooseImage{
  width: 140rpx;
  height:140rpx;
  line-height: 130rpx;
  border: 2rpx dashed #E1E1E6;
  box-sizing: border-box;
  font-size: 50rpx;
  text-align: center;
  margin:39rpx  0 0;
  color: #E1E1E6;
  border-radius:25rpx;
}
.upLoadImg_delImg{
  width: 30rpx;
  height: 30rpx;
  right:-15rpx;
  top:-15rpx;
  position: absolute;
}

.taskButtom{
  text-align: center;
  line-height: 90rpx;
  width:648rpx;
  height:90rpx;
  background:linear-gradient(267deg,rgba(85,235,255,1) 0%,rgba(28,145,242,1) 100%);
  box-shadow:0px 5rpx 40rpx 0px rgba(0,155,223,0.2);
  border-radius:45rpx;
  margin:80rpx auto;
  font-size:34rpx;
  font-family:PingFangSC-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);
}

js处理逻辑

/**
   * 页面的初始数据
   */
  data: {
    a_img: [],//存放A模块图片url地址
    b_img: [],//存放B模块图片url地址
    c_img: [], //存放C模块图片url地址
    a_imgId: [],//存放A模块图片上传获取的id
    b_imgId: [],//存放B模块图片上传获取的id
    c_imgId: [] //存放C模块图片上传获取的id
  },
  /**
   * 选择图片
   */
  chooseImage(e) {
    const that = this
    let type = e.currentTarget.dataset.type
    wx.chooseImage({
      count: 9,  // 默认9 一次性最多可以选择图片张数
      sizeType: [\'original\'], // 可以指定original:原图 compressed:压缩图
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res.tempFiles)
        let imgUrl = []
        res.tempFiles.findIndex(function (value, index, arr) {
          imgUrl.push(value.path)

        })
        let images = that.data[type].concat(...imgUrl)

        that.setData({
          [type]: images,
        })
      },
    })
  },
  /**
   * 点击图片删除按钮删除图片
   */
  delImg: function (e) {
    const that = this;
    const index = e.currentTarget.dataset.index;
    const sign = e.currentTarget.dataset.type;
    that.data[sign].splice(index, 1)
    that.setData({
      [sign]: that.data[sign],
    })
  },
  /**
   * 点击 上传图片 按钮
   */
  btnSave() {
    //1.0将需要上传的图片模块区分开
    let arrs = [\'a_img\', \'b_img\', \'c_img\']
    let imgArrs = []//将所有的模块图片url地址存放到一个数组中
    let imgObjs = {}//用一个对象对图片模块进行标记
    for (let i = 0; i ) {
      //上传图片之前当然你要判断当前模块是否有需要上传的图片，现在默认所有模块都有图片需要上传
      if (arrs[i].length > 0) {
        imgArrs.push(...this.data[arrs[i]])
        imgObjs[arrs[i]] = this.data[arrs[i]]
      }
    }
    this.setData({
      arrImgLength: 1 //设置上传图片从第一张图片开始上传
    })
    console.log(imgArrs)
    console.log(imgObjs)
    this.testUpload(imgArrs, imgObjs)
  },
  /**
   * 将确定需要上传的图片进行上传
   * imgArrs:需要上传的所有图片url地址数组
   * imgObjs：将不同图片模块放到一个对象里面
   */
  testUpload: function (imgArrs, imgObjs) {
    const that = this
    api.policy({//如果你开发过小程序，就应该知道这是先前文档定义好的获取oss图片id的后台服务
      method: \'POST\',
      data: {
        fc: 1
      },
      success: function (res) {
        if (res.data.code === 0) {
          let uploadData = res.data.data;
          wx.uploadFile({
            url: uploadData.auth.host, //仅为示例，非真实的接口地址
            filePath: imgArrs[that.data.arrImgLength - 1] + \'\',//要上传的资源路径，也就是我们需要上传的图片url地址
            name: "file",
            formData: {
              key: uploadData.files[0] + "." + imgArrs[that.data.arrImgLength - 1].split(".")[imgArrs[that.data.arrImgLength - 1].split(".").length - 1],
              policy: uploadData.auth.policy,
              signature: uploadData.auth.signature,
              OSSAccessKeyId: uploadData.auth.accessid,
              success_action_status: "200",
              callback: uploadData.auth.callback,
            },
            success: function (res) {
              let idData = res.data ? JSON.parse(res.data) : {}
              if (idData.Status == "Ok") {//表示图片上传成功了
                //将先前存储的对象进行for in遍历
                for (let key in imgObjs) {
                  //将对象里面的数组进行遍历
                  for (let i = 0; i ) {
                    //判断当前上传的图片url地址和对象存储的url地址是否一致
                    if (imgObjs[key][i] == imgArrs[that.data.arrImgLength - 1]) {
                      //如果url地址相同说明一致,这样我们就能找到这个图片属于哪个模块的了
                      that.data[key + \'Id\'].push(idData.id)//因为返回来的是代表图片的id，所以也需要将id存储起来

                    }
                  }
                }
                console.log(\'成功上传第：\' + that.data.arrImgLength + \'张\')
                ++that.data.arrImgLength//然后将图片上传的张数自加1

                //判断当前上传的图片数是否大于存放所有图片url地址的数组长度
                if (imgArrs.length < that.data.arrImgLength) {
                  //如果大于说明已经没有图片需要上传了
                  console.log(\'所有图片上传完毕\')
                } else {

                  console.log(\'开始上传第\' + that.data.arrImgLength + \'张\')
                  //如果不大于，说明还需要继续上传图片，然后进行回调
                  that.testUpload(imgArrs, imgObjs)
                }
              }

            },
            fail: function (res) {
              wx.showModal({
                showCancel: false,
                title: \'图片上传失败\',
              })
            },
          })

        }

      },
      fail: function (res) {

      }
    })
  },