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

码上流星&洒下星辰

已于 2022-07-11 14:44:29 修改

阅读量794

点赞数 1

分类专栏：小程序知识/功能大总结文章标签：微信小程序小程序

于 2022-07-11 14:39:32 首次发布

张砚博

本文链接：https://blog.csdn.net/qq_47272950/article/details/125720874

版权

小程序知识/功能大总结专栏收录该内容

34 篇文章 3 订阅

订阅专栏

"本文介绍了使用WeUI框架实现的WXML图片上传组件，包括`<view class="weui-uploader">`结构，CSS样式，以及`chooseImg`, `deleteImg`, 和 `previewImg` 方法的详细代码。重点展示了图片选择、预览和删除功能的实现。"

摘要由CSDN通过智能技术生成

在这里插入图片描述

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
    })
   },