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

时间:2025-01-19 15:52:47

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

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

js代码

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

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

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

js代码需要改为

afterRead(event) {
    const { file } = ;
    (item=>{
      (item);
    })
  },
  uploadImages(file){
    let that = this;
    let host = ;

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

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

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