【微信小程序原生】上传图片

最新推荐文章于 2025-05-23 09:25:17 发布

嘿，小苹果

最新推荐文章于 2025-05-23 09:25:17 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏：原生微信小程序文章标签：微信小程序小程序

原文链接：https://blog.youkuaiyun.com/qq_39606853/article/details/121474567

原生微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用微信小程序实现的图片上传组件，用户可以上传5张图片，展示在页面上，并能预览和删除。通过JS和CSS代码展示了如何实现选择图片、图片预览和删除功能的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

view

<view class="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 !import;
    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;
}


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 || []
    })
  }