1、最近在做小程序图片上传、预览以及删除功能，下面贴出代码，以供参考和交流。

2、 功能实现图：

3、wxml代码

  <view class="weui-cell weui-cell_input">

                      <view class="weui-cell__hd">

                        <view class="weui-label">上传照片</view>

                      </view>

    </view>

<view class="upload-imgs" wx:if="{{uploadImages.length > 0}}">

<block wx:for="{{uploadImages}}" wx:for-item="img" wx:key="{{id}}">

<image class="{{index == 1 || index == 4 || index == 7 ? 'mar' : ''}}" src="{{img.imgUrl}}" data-index="{{index}}"  bindtap="previewImg" >

<icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>

</image>

</block>

</view>

<view class="weui-cell__bd">

<view class="images">

<image  class="upload-img" src="/pages/images/equrepair/button.jpg" bindtap="chooseImage"></image>

</view>

</view>

</view>

3、wxcss局部代码

 .page .upload-imgs {

  padding-left: 3%;

  margin-bottom: 2%;

  position:relative;

}

.upload-imgs image {

  width: 30%;

  height: 107px;

  padding: 1%;

  position:relative;

}  

.delete-btn{

position: absolute;

top: 0;

right: 0

}

4、js代码

  /**

*预览图片

  **/ 

  previewImg: function (e) {

  var that = this;

  //获取当前图片的下标

 var index = e.currentTarget.dataset.index;

  //所有图片

  var imgArr = [];

  var objkeys = Object.keys(that.data.uploadImages); //{imgUrl: "https://20201020/1603.png"}

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

  imgArr.push(that.data.uploadImages[i]["imgUrl"]); //将img图片链接重新添加到imgarr数组，不然会报错，urls需要数组类型的数据，object会报错

  }

 wx.previewImage({

  //当前显示图片

  current: imgArr[index],

  //所有图片

  urls: imgArr

 })

},

/**

*删除图片

**/

 deleteImg: function (e) {

   var that = this;

   var imgs = that.data.uploadImages;

   var index = e.currentTarget.dataset.index;

    imgs.splice(index, 1);

    this.setData({

      uploadImages: imgs

    });

 },