微信小程序云开发上传单张 或 使用Vant上传多张图片

一、上传单张图片

 try {
      // 1.1弹出图片选择界面 用户选择图片
      let result = await wx.chooseMedia()
      // 1.2临时图片路径
      let temPath = result.tempFiles[0].tempFilePath
      //1.3获取图片格式 
      let ext = /\.[^\.]\w*$/.exec(temPath)[0]
      //1.4向云服务上传图片
      result = await wx.cloud.uploadFile({
        //图片格式
        cloudPath: "test/" + new Date().getTime() + ext,
        //图片路径
        filePath: temPath,
      })
      this.setData({
        images:result.fileID
      })
    } catch (error) {
      console.log(error);
    }

二、通过Vant上传多张图片

1. 效果图

2. .wxml

<!-- 选择图片 -->
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="delimg" multiple="{{true}}" />
<!-- multiple 是否多选 -->
<!-- 上传 -->
<van-button block type="primary" bindtap="upload">上传</van-button>
<!-- 九宫格 -->
<view class="imgbox">
  <image wx:for="{{showImg}}" wx:key="index" src="{{item.fileID}}" mode="widthFix" class="isimg"/>
</view>

3. .js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    fileList: [],
    showImg: []
  },
  //1.选择图片
  afterRead(event) {
    //1.1图片路径
    const { file } = event.detail;
    //1.2过滤出图片路径
    this.data.fileList = file.map(item => {
      return { url: item.thumb, deletable: true }
    })
    // deletable: true  Vant属性 是否可以删除
    //1.3赋值给data
    this.setData({
      fileList: this.data.fileList
    })
  },
  // 2.上传图片
  async upload() {
    //2.1判空 判断用户是否选择图片
    if (this.data.fileList.length == 0) {
      wx.showToast({
        title: '选择文件',
        icon: 'none'
      })
      return false
    }
    //2.2循环添加
    let arr = [] //声名一个空数组 用于得到Promise
    //2.3对data中用户选取的图片路径做处理
    this.data.fileList.forEach(item => {
      //得到图片格式
      let temPath = '.' + item.url.split('.')[1]
      //上传图片路径至云服务
      let pro = wx.cloud.uploadFile({
        //图片名称 "text/" 文件夹名称 
        // new Date().getTime() + Math.floor(Math.random() 防止文件名字重复
        cloudPath: "test/" + new Date().getTime() + Math.floor(Math.random() * 100) + temPath,
        //图片路径
        filePath: item.url
      });
      // 2.4 用于同意添加路径 减少循环提升性能
      arr.push(pro)
      wx.showToast({
        title: '添加成功',
        icon: "none"
      })
      //置空
      this.setData({
        fileList: []
      })
    })
    //2.5在图片全部上传完毕之后在进行 添加节省性能
    let newArr = await Promise.all(arr)
    //当用户再次添加 之前的的照片依然显示
    this.data.showImg = [...this.data.showImg, ...newArr]
    //2.6 改变data中的数据
    this.setData({
      showImg: this.data.showImg
    })
  },
  //删除图片
  delimg(e) {
    let index = e.detail.index
    this.data.fileList.splice(index, 1)
    this.setData({
      fileList: this.data.fileList
    })
  },
})