微信小程序——选择图片，上传图片，点击查看大图，删除图片

Page({
  data: {
    images: [],
    count: 3,  //设置最多三张图片
  },
  chooseImage: function () {
    var self = this;
    var images = self.data.images;
    var imagesShow = self.data.imagesShow;
    var count = self.data.count - images.length; //设置最多三张图片
    wx.chooseImage({
      count: count, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        for (var i = 0, h = res.tempFilePaths.length; i < h; i++) {
          images.push(res.tempFilePaths[i]);
          imagesShow.push(res.tempFilePaths[i]);
          self.setData({
            images: images,
            imagesShow: imagesShow
          })
        }
        // console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath为图片路径数组可以作为img标签的src属性显示图片
        // self.uploadImg(res,
        //   function (url) {
        //     images.push(url);
        //     self.setData({
        //       images: images,
        //     })
        //     //console.log(self.data.images)
        //   })
      }
    })
  },
  clickImage: function (e) {
    let self = this;
    let current = e.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: [current],
      fail: function () {
        console.log('fail')
      },
      complete: function () {
        console.info("点击图片了");
      },
    })
  },
  uploadImg: function (res, callback) {
    var tempFilePaths = res.tempFilePaths;
    //启动上传等待中...  
    wx.showToast({
      title: '上传中...',
      icon: 'loading',
      mask: true,
      duration: 10000
    })
    var uploadImgCount = 0;
    for (var i = 0, h = tempFilePaths.length; i < h; i++) {
      wx.uploadFile({
        url: app.globalData.Host + '/upload/upload',//app.globalData.Host为实际测试开发地址
        filePath: tempFilePaths[i],
        name: 'file',//这个就是传个后台图片路径所对应的key
        formData: {},
        header: {
          'content-type': 'multipart/form-data'
        },
        success: function (res) {
          uploadImgCount++;
          var data = JSON.parse(res.data);
          //console.log(data)
          //console.log(data.data)
          if (data.data) {
            //如果是最后一张,则隐藏等待中  
            if (uploadImgCount == tempFilePaths.length) {
              wx.hideToast();
            }
            callback(data.data)
          } else {
            wx.hideToast();
            wx.showToast({
              title: '上传图片失败',
              icon: 'none',
              duration: 1500
            })
          }
        },
        fail: function (res) {
          wx.hideToast();
          wx.showToast({
            title: '上传图片失败',
            icon: 'none',
            duration: 1500
          })
        }
      });
    }
  },
  deleteImage: function (e) {
    let self = this;
    let index = e.target.dataset.index;
    let images = self.data.images;
    let imagesShow = self.data.imagesShow;
    images.splice(index, 1);
    imagesShow.splice(index, 1);
    this.setData({
      images: images,
      imagesShow: imagesShow,
    })
  },
})

<view class="add-image">
    <view class="images-box" wx:if="{{imagesShow.length>0}}" wx:for="{{imagesShow}}" wx:for-item="item" wx:key="image">
      <image data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image>
      <image class="delete-image" data-index="{{index}}" src="/images/img_del.png" bindtap="deleteImage"></image>
    </view>
    <view class="images-box" wx:if="{{imagesShow.length<count}}">
      <image src="/images/img_add.png" bindtap="chooseImage"></image>
    </view>
  </view>

添加图片按钮 与 删除图片按钮 图片