小程序：選擇圖片、上傳圖片、關閉圖片

<!-- 門店照片 -->
<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
    })
  },