在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传

按照官方的例子我照着写了一下

<van-uploader multiple="{{true}}" file-list="{{ fileList }}" bind:after-read="afterRead" />

js代码

Page({
  data: {
    fileList: [],
  },

  afterRead(event) {
    const { file } = event.detail;
    console.log("file",file);
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        console.log("res",res);
        // 上传完成需要更新 fileList
        const { fileList = [] } = this.data;
        fileList.push({ ...file, url: res.data });
        this.setData({ fileList });
      },
    });
  },
});

发现不执行wx.uploadFile,网上有的说是bind:after-read="afterRead"的命名问题不支持-，但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传，如果是多图上传的话file就是数组了

js代码需要改为

afterRead(event) {
    const { file } = event.detail;
    file.forEach(item=>{
      this.uploadImages(item);
    })
  },
  uploadImages(file){
    let that = this;
    let host = app.globalData.siteroot;

    
    const {fileList,title} = that.data;
    if(!title){
      wx.showToast({
        title: "请先填写名称",
        icon:'error',
        duration: 2000
      })
      return true
      return false;
    }
    wx.uploadFile({
      url: host+'upload/index', 
      filePath: file.url,
      name: 'images',

      formData: { title },
      success(res) {
        const data = JSON.parse(res.data)
        // 上传完成需要更新 fileList
        
        fileList.push({ ...file, url: data.data.location });
        that.setData({ fileList });
      },
    });
  },

这样就可以实现多图上传功能了。特此记录一下