小程序图片上传，预览，删除功能

Posted 2021-12-18 前端e站

引言：微信小程序有一个专门上传图片的Api——uploader，但是此组件只适用于单张图片的上传。在实际操作过程中，会涉及到多图上传以及图片相关的其他的功能的实现。那么，接下来我就简单介绍一下其中的多张图片上传和图片删除以及预览功能

html部分

<viewclass="flex-wrap">
	 <view class="iconfont icon-camera" bindtap='upload' wx:if="imgArr.length < 5"></view>
		 <view class="relative" wx:for="imgArr" wx:key="item">
	 	 	<text class="iconfont icon-guanbi color-style" data-index='index' catchtap='deleteImg'></text>
		  <image mode="aspectFit" src="item" bindtap="preview" data-src="item" alt="图片"/>
	 </view>
</view>

css部分

.flex-wrap
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

.icon-guanbi.color-style 
    color: #000;
    font-size: 40rpx;
    position: absolute;
    right: 4rpx;
    top: 4rpx;
    font-size: 80rpx;
    color: #fff;

.icon-camera
    color: #6C6F82;

.icon-camera, .flex-wrap image
    font-size: 72rpx;
    border: 2rpx solid #eee;
    border-radius: 20rpx;
    width: 156rpx;
    height: 156rpx;
    text-align: center;
    line-height: 156rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;

.flex-wrap .relative
    position: relative;

js代码

data: 
   imgArr: []


  //选择要上传的图片
  upload () 
    var that = this;
    // 最好只能选5张
    if (that.data.imgArr&&that.data.imgArr.length < 5) 
      wx.chooseImage(
        count: 5 - that.data.imgArr.length, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => 
          that.setData(
            imgArr: that.data.imgArr.concat(res.tempFilePaths)
          )
        
      )
     else 
      wx.showToast(
        title: '最多上传五张图片',
        icon: 'none',
        duration: 3000
      );
    
  ,
   // 预览图片，放大预览
   preview(event) 
    console.log(event.currentTarget.dataset.src)
    let currentUrl = event.currentTarget.dataset.src
    wx.previewImage(
      current: currentUrl, // 当前显示图片的http链接
      urls: this.data.imgArr // 需要预览的图片http链接列表
    )
  ,
  // 删除图片
  deleteImg (e) 
    var that=this;
    var index = e.currentTarget.dataset.index;
    const pictureArr = that.data.imgArr[index].split('/')
    that.data.imgArr.splice(index, 1)
    that.setData(
       imgArr: that.data.imgArr || []
    )
  

​​​

扫描二维码识别添加小站，或者关注微信公众号前端e站。

1、如果你有好的技术文章。

2、如果你有需要的技术分享主题。

3、如果你有面试上的问题(包括简历、面试题)，那就快来联系小站吧！

​