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