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

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

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,//所有要预览的图片
    })
  },
  })

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