[移动开发]小程序结合vant Weapp实现多张图片的上传和预览

前言：

不太懂为啥vant Weapp的官方文档明明可以写全代码，却只放了一部分出来，关于云开发的案例也是写得蛮晦涩难懂的，参考了以下的文档：
云开发能力基础讲解
小程序官方文档wx.cloud.uploadFile
vant Weapp官方文档Uploader 文件上传

参考了这位博主的文章
微信小程序云开发图片上传实现预览（配合vant Weapp使用）

实现效果预览：

上传成功前显示图片正在加载，上传成功才显示图片

WXML代码：

<view class="image-uploader">
	<!-- 文件上传 -->
	<van-uploader file-list="{{ fileList }}"
	deletable="{{ true }}" 
	use-before-read
	bind:before-read="beforeRead"
	bind:after-read="afterRead" 
	bind:delete="deleteImg"/>
</view>

before-read：文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为true
after-read：文件读取完成后（不用使用wx.chooseImage，event.detail.file就是当前读取的文件

JS代码：

Page({
  data: {
    fileList: [],
  },
  
  //before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。
  beforeRead(event) {
    const { file, callback } = event.detail;
    callback( file.type === 'image' );
  },
  
  afterRead( event) {
    const file = event.detail.file 
    
    //还没上传时将选择的图片的上传状态设置为加载    
    var that = this
    const fileList = that.data.fileList 
    fileList.push({})
    fileList[ fileList.length-1 ].status='uploading'
    that.setData({ fileList })

    this.uploadImg( file.url )
  },

 // 上传图片到云开发的存储中
  uploadImg( fileURL) {
    var that = this
    //上传文件
    const filePath = fileURL // 小程序临时文件路径
    const cloudPath = `${Date.now()}-${Math.floor(Math.random(0, 1) * 1000)}` + filePath.match(/\.[^.]+?$/)[0]
    // 给文件名加上时间戳和一个随机数，时间戳是以毫秒计算，而随机数是以 1000 内的正整数，除非 1 秒钟（1 秒=1000 毫秒）上传几十万张照片，不然文件名是不会重复的。
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      cloudPath, // 指定上传到的云路径
      filePath // 指定要上传的文件的小程序临时文件路径
    }).then(res => {
      // 上传一张图片就会打印上传成功之后的 res 对象，里面包含图片在云存储里的 fileID，注意它的文件名和文件后缀
      console.log("res.fileID", res.fileID)
      // 上传完成需要更新 fileList
      const fileList = that.data.fileList 
      fileList[ fileList.length-1 ].url = res.fileID
      fileList[ fileList.length-1 ].status='done' //将上传状态修改为已完成
      that.setData({ fileList })
      console.log("fileList", fileList)
      wx.showToast({ title: '上传成功', icon: 'none' })
    }).catch((e) => {
      wx.showToast({ title: '上传失败', icon: 'none' })
      const fileList = that.data.fileList 
      fileList[ fileList.length-1 ].status='failed' //将上传状态修改为已完成
      that.setData({ fileList })
      console.log(e)
    });
  },

  // 点击预览的x号，将图片删除
  deleteImg( event) {
    // event.detail.index: 删除图片的序号值
    const delIndex = event.detail.index
	const fileList = that.data.fileList 
	
    // 云存储删除（真删除）
    var fileID = fileList[ delIndex].url
    this.deleteCloudImg( fileID)
    
    // 页面删除（假删除）
    // 添加或删除 array.splice(index,howmany,item1,.....,itemX)
    fileList.splice( delIndex, 1)
    this.setData({ fileList })
  },

  // 删除云存储的图片
  deleteCloudImg( fileID) {
    wx.cloud.deleteFile({
      fileList: [ fileID],
    }).then(res => {
      // handle success
      console.log(res.fileList)
    }).catch((e) => {
      wx.showToast({ title: '删除失败', icon: 'none' })
      console.log(e)
    })
  }
})

与50位技术专家面对面

20年技术见证，附赠技术全景图