按照官方的例子我照着写了一下
<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 }); }, }); },
这样就可以实现多图上传功能了。特此记录一下
