Vant-weapp Uploader 文件上传 前端代码

HTML

<van-uploader file-list="{{ fileList }}" bind:after-read="uploadImage" accept="image" max-count="6" bind:delete="onDelImage" />

JS

  uploadImage(event) {
    const { file } = event.detail;
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: '后台真实upload地址', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: { authorize: app.getToken() },
      success:(res) => { //这里要用箭头函数，否则报变量为定义的错
        // 上传完成需要更新 fileList
        const { fileList = [] } = this.data;
        const resData = JSON.parse(res.data);
        fileList.push({ ...file, url: resData.path });
        this.setData({ fileList });
      },
    });
  },

  //点击删除图片
  onDelImage(event) {
    let id = event.detail.index //能获取到对应的下标
    let fileList = this.data.fileList //这里是前端页面展示的数组
    fileList.splice(id, 1) //删除1张刚刚点击的那图
    this.setData({
      fileList: fileList, //在这里进行重新赋值  删除后 图片剩几张就相当于给后台传几张
    })
  },