微信小程序多图上传及预览

微信小程序多图上传，删除，预览集一体的代码；

//wxml
<view class='picList'>
      <view class='item'  wx:for="{{imgUrl}}" wx:for-index="key">
         <image class="thumb" data-current="{{item}}" data-index="{{key}}" bindtap='previewImg'  src="{{item}}"/>
         <view class='delPic' bindtap='remImg' data-id="{{key}}"><image src='/images/delPic.png'/></view>
      </view>
      <view class='upload' bindtap="imgupload" ><image src='/images/upload.png'></image></view>
      </view>

//css
.picList{
  box-sizing: border-box;
  padding-left:20rpx;
  padding-right:20rpx;
  overflow: visible;
}
.clear{
    clear: both;
}
.upload{
  float:left;
  width:120rpx;
  height:120rpx;
  margin-bottom: 20rpx;
}
.upload image{
  display: block;
  width:100%;
  height:100%;
}
.picList .item{
  display: block;
  float:left;
  margin-right:20rpx;
  margin-bottom: 20rpx;
  width: 120rpx;
  height: 120rpx;
  position: relative;
  overflow: visible;
}
.picList .item .delPic{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: -15rpx;
  top:-15rpx;
}
.picList .item .delPic image{
  display: block;
  width: 100%;
  height: 100%;
}
.picList .item>image{
  display: block;
  width:100%;
  height:100%;
}

const app = getApp()
Page({
	data:{
		imgUrl:[],
		
	},
	imgupload: function () {
    var that = this;
    var count = parseInt((that.data.imgUrl).length);
    if (count >= '15') {
      wx.showToast({
        title: '最多上传15张',
        duration: 1500
      })
      return false;
    }
    wx.chooseImage({
      count: 9,
      sizeType: ['compressed'],
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        var i = 0; //第几个
        var length = res.tempFilePaths.length; //总共个数
        var successUp = 0; //成功个数
        var failUp = 0; //失败个数
        that.uploadImg(tempFilePaths, successUp, failUp, i, length);
      }
    })
  },
   uploadImg: function (tempFilePaths, successUp, failUp, i, length) {
    var that = this;
    var token = wx.getStorageSync('token');
    wx.uploadFile({
      url: api.api.upload, 
      filePath: tempFilePaths[i],
      name: 'name',
      header: {
        'content-type': 'multipart/form-data',
        'Authorization': token
      },
      success: function (res) {
        var srcArr = that.data.imgUrl;
        srcArr.push(res.data);
        that.setData({
          imgUrl: srcArr
        });
      }, complete: () => {
        i++;
        if (i == length) {
          return;
        } else {  //递归调用uploadDIY函数
          if (!that.data.isuploaderror) {
            this.uploadImg(tempFilePaths, successUp, failUp, i, length);
          }
        }
      }
    })
  }, 
   // 删除
  remImg:function(e){
    var that = this;
    var dataset = e.currentTarget.dataset;
    var Index = dataset.id;
    that.data.imgUrl.splice(Index, 1);
    that.setData({
      imgUrl: that.data.imgUrl
    });
    console.log(that.data.imgUrl)
  },
  // 图片预览
  previewImg: function (e) {
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.imgUrl;
    wx.previewImage({
      current: imgArr[index],     //当前图片地址
      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
})