微信小程序实现单/多图片上传（预览删除）

wxml结构

//上传图片
 <view class="weui-uploader">
       <view class='pics' wx:for="{
    
    {imgs}}" wx:for-item="item" wx:key="*this">
             <image class='weui-uploader__img' src="{
    
    {item}}" data-index="{
    
    {index}}" mode="aspectFill" bindtap="previewImg">
             <icon type='cancel' class="delete-btn" data-index="{
    
    {index}}" catchtap="deleteImg"></icon>
       </image>
	  </view>
            <view class="tp_cont {
    
    {tj_ycang?'':'hide'}}" bindtap="chooseImg">
            <view class="tp_add">+</view>
</view>
</view>

css代码

.weui-uploader{
    
    
    margin-top: 12rpx;
  }
  .tp_add{
    
    
    width: 152rpx;
    height: 152rpx;
    border-radius: 10rpx;
    opacity: 1;
    border: 2rpx dashed #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 59rpx;
  }
  
  .pics {
    
    
    float:left;
    position:relative;
    margin-right:15px;
    margin-bottom:15px;
    }
    .pics image{
    
    
      width: 152rpx;
      height: 152rpx;
    }
    .delete-btn{
    
    
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      top: -15rpx;
      right: -5rpx;
    }
    .weui-uploader{
    
    
      padding: 10rpx;
      margin-left: 46rpx;
    }
  

js逻辑

// 上传图片
   chooseImg (e) {
    
    
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 1) {
    
    
     this.setData({
    
    
      lenMore: 1
     });
     setTimeout(function () {
    
    
      that.setData({
    
    
       lenMore: 0
      });
     }, 2500);
     return false;
    }
    wx.chooseImage({
    
    
     // count: 1, // 默认9
     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
     success(res) {
    
    
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      var imgs = that.data.imgs;
      // console.log(tempFilePaths + '----');
      for (var i = 0; i < tempFilePaths.length; i++) {
    
    
       if (imgs.length >= 1) {
    
    
        that.setData({
    
    
         imgs: imgs
        });
        return false;
       } else {
    
    
        imgs.push(tempFilePaths[i]);
       }
      }
      // console.log(imgs);
      that.setData({
    
    
       imgs: imgs
      });
        wx.uploadFile({
    
    
            url: "后台接口地址", //接受图片的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
    
    
                'user': 'text'
            },
            success: function (res){
    
    
                console.log(that)
                that.data.urll = JSON.parse(res.data).url
                console.log(res);
                const data = res.data
                //do something
            }
        })
     }
    });
   },
  // 删除图片
   deleteImg: function (e) {
    
    
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
    
    
     imgs: imgs
    });
   },
   // 预览图片
   previewImg: function (e) {
    
    
     //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
     //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
    
    
     //当前显示图片
     current: imgs[index],
     //所有图片
     urls: imgs
    })
   },