微信小程序学习之路（四）单张图片上传，预览，长按删除

先看截图，再看代码

图1 使用样式，明确我们上传图片的位置，即红框之内。

图2：点击红框，打开图库。手机测试，可顺利打开图库，可拍照。

图3选中图片，成功上传至红色方框内。

图4,点击预览，手机端测试可放大查看图片

图5 鼠标点击超过两秒弹出窗口询问是否删除

点击删除，提示删除成功。

第一次写的时候，参考官方文档写出来，希望第一次点击能够上传图片，第二次点击能够预览图片，抱着试试的态度，就写demo，然而结果就是，我使用两个view嵌套，第一个view的功能是上传图片，第二个view是预览图片，并且里面嵌套image标签

，两个view都是使用bindtap绑定点击触发事件，但是会发现，第一次点击外面的view，会触发自己的事件，点击里面的view，会先触发自己的事件，再触发外层view的事件。

经过查询，发现catchtap可以有效解决这件事情。

废话不多，看代码：

wxml

<view bindtap='bindChooiceProduct' style="height:300px;border:1px solid red">
<view   wx:for="{{imgindex}}" wx:key="{{imgindex}}"  data-index="{{index}}" bindlongpress='removeimge'style="height:100%;width:100%">
<image  src='{{item}}'catchtap="previewImg"style="height:100%;width:100%"></image>
</view> 
</view>

js

Page({
  data: {
    imgs: [],
    index: '',
    imgindex: []
  },
  bindChooiceProduct() {
    const that = this;
    wx.chooseImage({
      count: 1,  //最多可以选择的图片总数
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        wx.showLoading({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 10000
        })
        if (res.errMsg == 'chooseImage:ok') {
          wx.hideLoading()
          console.log(res);
          const tempFilePaths = res.tempFilePaths;
          var arr = [];
          tempFilePaths.forEach((value, indexindex) => {
            arr.push(value)
          })
          that.setData({
            imgindex: arr
          })
          console.log(that.data.imgindex)；
        }
      }
    })
  },
  //长按事件删除图片
  removeimge(e) {
    const that = this;
    let index = e.currentTarget.dataset.index;
    let imgindex = that.data.imgindex;
    imgindex.splice(index, 1);
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          that.setData({
            imgindex: imgindex
          })
          wx.showToast({
            title: '删除成功',
            icon: 'none'
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  previewImg: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: this.data.imgindex,
      success: function (res) {
        console.log('success');
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  }, //转发
  f:function(){
    console.log("f");
  },
  s: function () { console.log("s"); }, 
  deleteImage: function (e) {
    var that = this;
    var images = that.data.imgs;
    console.log(images);
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    console.log(index);
    wx.showModal({
      title: '系统提醒',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          images.splice(index, 1);
        } else if (res.cancel) {
          return false;
        }
        that.setData({
          files: images
        });
      }
    })
  }
})