微信小程序 上传多张图片及删除、预览

今天做项目,正好遇到在小程序中需要实现从本地文件中一次选择上传多张图片,同时要支持删除和预览效果。先看下效果图:

上传图片点击上传的图片进行预览模式

1、上传按钮代码:

<!-- 添加图片按钮  -->
    <view class="question-images-tool">
      <button type="warn" bindtap="chooseImage" wx:if="{{images.length < 9}}">添加图片</button>
    </view>

在button中我添加了一个按钮类型为 warn, 这个类型只是使用官方自带的样式。
在这里插入图片描述
wx:if="{{images.length < 9}}" 这里是最多只能上传9张图片,可根据自己的需求更改。

3、上传图片缩略图代码:

 <!-- 图片缩略图  -->
    <view class="question-images">
      <block wx:for="{{images}}" wx:key="*this">
        <view class="q-image-wrap">
          <image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
          <view class="q-image-remover" data-idx="{{index}}" bindtap="removeImage">X</view>
        </view>
      </block>
    </view>

这里的代码是指上传后的图片代码

4、上传图片的js

import { $init, $digest } from '../utils/common.util'
const wxUploadFile = promisify(wx.uploadFile)

Page({
  data: {
	titleCount: 0,
    contentCount: 0,
    title: '',
    content: '',
    images: [],
  }
	//上传图片
  onLoad(options) {
    $init(this)
  },

  handleTitleInput(e) {
    const value = e.detail.value
    this.data.title = value
    this.data.titleCount = value.length
    $digest(this)
  },

  handleContentInput(e) {
    const value = e.detail.value
    this.data.content = value
    this.data.contentCount = value.length
    $digest(this)
  },

  chooseImage(e) {
    wx.chooseImage({
      count: 9,// 最多可以选择的图片张数,默认9
      sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
      sourceType: ['album', 'camera'],// album 从相册选图,camera 使用相机,默认二者都有
      success: res => {
        const images = this.data.images.concat(res.tempFilePaths)
        this.data.images = images.length <= 9 ? images : images.slice(0, 9)// 限制最多只能留下9张照片
        $digest(this)
      }
    })
  },
  //删除
  removeImage(e) {
    const idx = e.target.dataset.idx
    this.data.images.splice(idx, 1)
    $digest(this)
  },
  //预览图片
  handleImagePreview(e) {
    const idx = e.target.dataset.idx
    const images = this.data.images

    wx.previewImage({
      current: images[idx],//当前预览的图片
      urls: images,//所有要预览的图片
    })
  },
  })

以上就是上传图片及删除、预览的所有内容了,样式就不写了。可以自己根据自己的审美去调整页面美观。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值