微信小程序商城类项目使用到的前端效果（4）——多图上传

上传多张图片
wxmll

<view class="upload-img">
  <text>上传凭证</text>
  <view class="img-list"> 
    <view class="img-item" wx:for="{{voucher}}" wx:key="index" >
      <image class="userinfo-avatar" src="{{item}}" mode="aspectFit" wx:if="{{voucher.length != index+1}}"></image> 
      <image class="userinfo-avatar" src="{{item}}" mode="aspectFit" bindtap="addImg" wx:else></image> 
      <view  data-index="{{index}}" bindtap="delImg" wx:if="{{voucher.length != index+1}}">X</view>
    </view>
  </view>
</view>

wxss

.upload-img text{
  display: inline-block;
  height:5vw;
  font-size: 30rpx;
  margin-bottom: 2vw;
}
.img-list{
  display: flex;
  flex-wrap: wrap;
}
.img-item{
  width:28vw;
  height:28vw;
  margin-bottom:3vw;
  margin-right: 2vw;
  border:1px solid #ddd;
  position: relative;
}
.img-item:last-child{
  border:none;
}

.img-list image{
  width:100%;
  height:100%;
}
.img-item view{
  color:#fff;
  font-size: 3vw;
  width:5vw;
  height:5vw;
  text-align: center;
  line-height: 5vw;
  border-radius: 2.5vw;
  background: #797979;
  position: absolute;
  top:-1.5vw;
  right:-1.5vw;
}

js

const app = getApp()

Page({

  /**
    * 页面的初始数据
    */
  data: {
    voucher: ["/images/order/add-img.png"],
  },
  onLoad: function (options) {
  },
  addImg: function (e) {
    var that = this;
    var pics = [];
    wx.chooseImage({
      count: 9,// 默认9
      sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        // var tempFilePaths = res.tempFilePaths;
        var imgs = res.tempFilePaths;
        for (var i = 0; i < imgs.length; i++) {
          pics.unshift(imgs[i])
          var voucher = that.data.voucher;
          voucher.unshift(imgs[i])
          that.setData({
            voucher: voucher,
          });
        }
        that.uploadimg({
          url: app.globalData.url + 'frontend/web/v1/commons/uploadPic',//这里是你图片上传的接口
          path: pics,//这里是选取的图片的地址数组
        })
      }
    })
  },
  //多张图片上传
  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: 'image',//这里根据自己的实际情况改
      formData: { type: "refund" },//这里是上传图片时一起上传的数据
      header: {
        "Content-Type": "multipart/form-data",//记得设置
        "token": app.globalData.token
      },
      success: (resp) => {
        //图片上传成功，图片上传成功的变量+1
        resp.data = JSON.parse(resp.data);
        if (resp.data.code = 1) {
          success++;

        }
        //这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1
      },
      fail: (res) => {
        fail++;//图片上传失败，图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        i++;//这个图片执行完上传后，开始上传下一张
        if (i == data.path.length) {   //当图片传完时，停止调用          
          console.log('执行完毕');
          console.log('成功：' + success + " 失败：" + fail);
        } else {//若图片还没有传完，则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);
        }
      }
    });
  },
  delImg: function (e) {
    var that = this
    var voucherId = this.data.voucherId;
    var voucher = this.data.voucher;
    wx.request({
      url: app.globalData.url + 'frontend/web/v1/commons/delPic',
      method: 'POST',
      data: {
        media_id: voucherId[e.currentTarget.dataset.index]
      },
      header: {
        "Content-Type": "application/json",
        "token": app.globalData.token
      },
      success: function (res) {
        if (res.data.code == 1) {
          voucherId.splice(e.currentTarget.dataset.index, 1);
          voucher.splice(e.currentTarget.dataset.index, 1);
          that.setData({
            voucher: voucher,
            voucherId: voucherId,
          });
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }
      }
    });
  },
})