微信小程序实现上传多张图片、删除图片-前端-E先生的博客

　　最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图

　　效果图：

　　下面直接展示代码：wxml

  <view class="addInput">

    宣传画廊:

    <view class="wai">

      <block wx:for="{{files}}" wx:key="*this">

      <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">

        <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />

        <image wx:if="{{files.length>0}}" class="icon-delete" src="../../../../static/images/icon_close.png"

          bindtap="deleteImg2">image>

      view>

    block>

    view>

    <button class="imgButton" bindtap="chooseImage2"  wx:if="{{ files.length < 5 }}">添加画廊button>

  view>

　　下面直接展示代码：js

  // 删除图片

  deleteImg2:function(e) {

    let self = this;

    let index = e.target.dataset.index;

    let files = self.data.files;

    let image = self.data.image;

    image.splice(index, 1);

    files.splice(index, 1);

    this.setData({

      image: image,

      files: files

    })

  },

// 添加画廊

  chooseImage2: function (e) {

    if (this.data.files.length >= 5) {

      util.showErrorToast('只能上传5张照片')

      return false;

    }

    var that = this;

    wx.chooseImage({

      count: 1,

      sizeType: ['original', 'compressed'],

      sourceType: ['album', 'camera'],

      success: function (res) {

        that.setData({

          files: that.data.files.concat(res.tempFilePaths)

        });

        console.log("files", that.data.files)

        that.upload(res);

      }

    })

  },

upload: function (res) {

    var that = this;

    const uploadTask = wx.uploadFile({

      url: api.StorageUpload,

      filePath: res.tempFilePaths[0],

      name: 'file',

      success: function (res) {

        var _res = JSON.parse(res.data);

        if (_res.errno === 0) {

          var url = _res.data.url

          that.data.image.push(url)

          that.setData({

            hasPicture: 1,

            image: that.data.image

          })

          console.log('图片', that.data.image)

        }

      },

      fail: function (e) {

        wx.showModal({

          title: '错误',

          content: '上传失败',

          showCancel: false

        })

      },

    })

    uploadTask.onProgressUpdate((res) => {})

  },

有问题私聊作者点个小心心感谢