微信小程序选择图片可删除，可查看大图

废话不多说，直接上代码！！！

在wxml文件中添加如下代码：

  <view class="add_img_bg">

    <view class='imagess' wx:for="{{img_url}}" data-id="{{index}}" >

      <image class="moment_img" src="{{item.tempFilePath}}" bindtap="openclickImage" data-item="{{item}}"></image>

      <image class="closeImv" src="../../images/chacha.png" mode="scaleToFill" catchtap="deleteImvBanner"  data-index="{{index}}" data-id="{{index}}"></image>

    </view>

    <view class='imagess' style='display:{{hideAdd?"none":"block"}}'>

      <image bindtap="chooseimage" src="/images/add_img.png" class="moment_img" ></image>

    </view>

  </view>

所需切图：

                       

 

 

在wxss文件中添加class样式：

.add_img_bg{

  width: auto;

  display: flex;

  flex-wrap: wrap;

  margin-top: 14px;

  margin-left: 15px;

  margin-right: 15px;

}

.imagess{

  width:31%;

  height: 100px;

  padding: 2px;

  position: relative;

} 

.moment_img{

  width: 98px;

  height: 98px;

  background: #F2F2F2;

  border-radius: 10px;

}

.closeImv {

  position: absolute;

  right: 20rpx;

  top: 0rpx;

  width: 50rpx;

  height: 50rpx;

}

在js文件中编辑功能代码：

在data里面初始化img_url:[],

选择图片：

chooseimage:function(){

    var that = this;

    var length = that.data.img_url.length;

    var num = 5-length;

    wx.chooseMedia({

      count:num,

      mediaType: ['image'],

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

      camera: 'back',

      success(res) {

        console.log(res.tempFiles)

        //把每次选择的图push进数组

        var img_url = that.data.img_url;

        for (var i = 0; i < res.tempFiles.length; i++) {

          img_url.push(res.tempFiles[i])

        }

        that.setData({

          img_url: img_url

        })

        if (img_url.length>0){

          //图如果满了5张，不显示加图

          if (img_url.length >= 5){

            that.setData({

              hideAdd:1

            })

          }else{

            that.setData({

              hideAdd: 0

            })

          }

        }

      }

    })

  },

删除已选择图片：

  deleteImvBanner:function(e){

    var that = this;

    console.log(e);

    var img = that.data.img_url;

    var temArray=[];

    console.log("删除 =   ",e.currentTarget.dataset.index);

    for(var i=0;i<img.length;i++){

      if(i!=e.currentTarget.dataset.index){

        temArray.push(img[i]);

      }

    }

    that.setData({

      img_url:temArray,

    })

    if (temArray.length>0){

      //图如果满了5张，不显示加图

      if (temArray.length >= 5){

        that.setData({

          hideAdd:1

        })

      }else{

        that.setData({

          hideAdd: 0

        })

      }

    }

  },

点击查看大图：

  openclickImage: function (e) {

    var self = this;

    console.log("查看大图 ",e);

    var url = e.currentTarget.dataset.item.tempFilePath;

    wx.previewImage({

      current: url,

      urls: [url],

      fail: function () {

        console.log('fail')

      },

      complete: function () {

        console.info("点击图片了");

      },

    })

  },