微信小程序自定义多图上传插件：最多9张图，可删除

上传图片官方并没有给现成的插件，每次用到都要搜一翻，改吧改吧一波儿，烦死了，方便下次使用我还是直接整理一下吧！

1.html

<view class="upload-box">
      <view class="bg-img" wx:for="{{imgList}}" wx:key="index" bindtap="ViewImage" data-url="{{imgList[index]}}">
        <image class="up-img" src='{{imgList[index]}}' mode='aspectFill'></image>
         <!-- 导入图标不允许 待定 -->
        <view class="up-img-del" catchtap="DelImg" data-index="{{index}}">
            <image src="/images/icon/icon_colse.png"></image>
        </view>
      </view>
      <view class="file-view" bindtap="ChooseImage" wx:if="{{imgList.length<9}}">
        <image src="/images/icon/icon_upload.png"></image>
      </view>
  </view>

2.css

.file-view{width: 160rpx;height: 160rpx;border: 2rpx solid #eee;text-align: center;border-radius: 10rpx;}
.file-view image{width: 80rpx;height: 80rpx;margin-top: 40rpx;}
.bg-img{width: 164rpx;height: 164rpx;border-radius: 10rpx;overflow: hidden;position: relative;}
.bg-img image.up-img{width: 100%;height: 100%;object-fit: cover;}
.up-img-del{position: absolute;right: 0;top: 0;z-index: 1;width: 40rpx;text-align: center;height: 40rpx;background: rgba(0,0,0,.2);}
.up-img-del image{width: 24rpx;height: 24rpx;margin-top: 8rpx;}
.file-view,.bg-img{float: left;margin-right: 14rpx;margin-bottom: 15rpx;}
.upload-box{width: calc(100% + 28rpx);height: auto;overflow: hidden;}

3.js

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

    var arr_img = this.data.imgList;
    var new_arr_img = [];
    for (var i = 0; i < arr_img.length; i++) {
      if (i != img_index) {
        new_arr_img.push(arr_img[i]);
      }
    }

    this.setData({
      imgList: new_arr_img
    });
  },

下次使用更方便，哈哈哈，机智如我！