小程序：选择图片、上传图片、关闭图片

<!-- 门店照片 -->
<view class="storePhoto">
  <view class="title padd-24">门店照片</view>
  <view class="upload padd-24">
    <!-- 上传保存到数组choosePhoto中，然后，遍历到页面，如果点击右上角的关闭按钮，用wx:if判断值是否存在，如果不存在，则隐藏 -->
    <view class='uploadImgBox'  wx:for="{{choosePhoto}}" wx:for-item="img" wx:if="{{img}}">
      <image src="{{img}}" class='uploadPhoto' mode="aspectFi"  />
      <image class='closeImg' src='{{closeBtn}}' bindtap='closeUploadImg' data-close="{{index}}" />
    </view>
    <view class='uploadImgBox' bindtap='chooseImg'>
      <image class='uploadPhoto' mode="aspectFi" src='{{uploadPhoto}}'   />
    </view>
  </view>
  <view class="service padd-24">
    <textarea bindblur="bindTextAreaBlur"  placeholder="请输入店铺服务事项（如汽车保养，汽车维修等）" 
    placeholder-style="color:#656565;" />
  </view>
</view>

/* 门店照片 */
.title {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 28rpx;
  color: #989898;
}
.upload {
  width: 100%;
  margin-bottom: 30rpx;
  background: #f0c;
}
.uploadImgBox {
  width: 212rpx;
  height: 144rpx;
  margin-right: 33rpx;
  margin-bottom: 10rpx;
  position: relative;
  background: #fff;
}
.uploadImgBox:nth-child(3n) {
  margin-right: 0;
}
.uploadPhoto {
  width: 212rpx;
  height: 144rpx;
}
.closeImg {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  right: 5rpx;
  top: 5rpx;
}

.service {
  width: 100%;
  height: 208rpx;
  border-top: 1rpx solid #ece9e9;
  border-bottom: 1rpx solid #ece9e9;
  line-height: 30rpx;
  font-size: 26rpx;
  padding-top: 20rpx;
}
.service textarea {
  width: 100%;
  height: 100%;
}

// 在app.js中定义多图片上传函数
    // 多张图片上传    
  uploadImg: function(data){
    var that = this,
    i = data.i ? data.i : 0,
    success = data.success ? data.success : 0,
    fail = data.fail ? data.fail : 0

      wx.uploadFile({
      url: data.url,
      filePath: data.path[i],
      name: 'fileData',    // 这里根据自己的实际情况修改
      formData: null,
      success: function (resp) {
        success++
        console.log(resp)
        console.log(i)
        /*
          这里肯能有bug，失败也会执行这里，所以这里应该是后台返回过来的状态码为成功时，
          这里的succes才+1
        */
      },
      fail: function (res) {
        fail++
        console.log('fail: ' + i + 'fail: ' + fail)
      },
      complete: function (res) {
        console.log(i)
        i++


        if (i == data.path.length) {   //当图片传完时，停止调用          
          console.log('执行完毕');
          console.log('成功：' + success + " 失败：" + fail);
        } else {//若图片还没有传完，则继续调用函数
          console.log(i);
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);
        }


        if (i == data.path.length) {        // 当图片传完时，停止调用
          console.log('执行完毕')
          console.log('成功：' + success + '失败：' + fail)
        } else {    // 若图片还没有传完，则继续调用函数
          console.log(i)
          data.i = i
          data.success = success
          data.fail = fail
          that.uploadimg(data)
        }
      }
    })
  },


// 在页面中获取app实例
    
    //获取应用实例
    const app = getApp()
    
   Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 上传关闭的按钮
    closeBtn: "../../../img/my/close.png",

    // 上传的按钮
    uploadPhoto: "../../../img/my/upload.png",

    // 上传图片的数组
    choosePhoto: [],


  },

// 绑定上传图片的函数
  chooseImg: function(){        // 这里是选取图片的方法
    var that = this,
      choosePhoto = this.data.choosePhoto

    wx.chooseImage({
      count: 9 - choosePhoto.length,        // 最多可以选择9张图片，默认9
            success: function (res) {
        var imgsrc = res.tempFilePaths
        choosePhoto = choosePhoto.concat(imgsrc)
        that.setData({
          choosePhoto: choosePhoto
        })
      }
    })
  },

  // 关闭当前选择的这个图片
  closeUploadImg: function(res){
    // console.log(res)
    var that = this
    var parent = res.currentTarget.dataset.close    // 获取点击的是第几张图片键值
    // console.log(parent)
    var choosePhoto = this.data.choosePhoto
    // choosePhoto = choosePhoto.splice(parent,1)
    delete choosePhoto[parent]
    that.setData({
      choosePhoto: choosePhoto
    })
  },