解决方案1
<van-uploader file-list="{{ fileList }}" max-count="1" deletable="{{ true }}" bind:after-read="afterRead"/>
afterRead:function(event){
console.log(event);
const { file } = event.detail;
const{fileList=[]} = this.data;
fileList.push({url:file.path});
this.setData({fileList})
console.log(fileList)
}
---------------------------------------------------------------------------------------
官方代码
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
Page({
data: {
fileList: [],
},
afterRead(event) {
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
// 上传完成需要更新 fileList
const { fileList = [] } = this.data;
fileList.push({ ...file, url: res.data });
this.setData({ fileList });
},
});
},
});
---------------------------------------------------------------------------------------
解决反感2
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:delete="delete" multiple="{{true}}" preview-size='80rpx' max-count="1"/>
// 图片预览
afterRead(event) {
const { file } = event.detail; // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
this.setData({
fileList: file,
});
this.uploadImg(file);
},
// 删除图片
delete(event) {
console.log(event);
let imgDelIndex = event.detail.index;
let fileList = this.data.fileList;
fileList.splice(imgDelIndex, 1);
console.log("删除图片的", fileList);
this.setData({
fileList,
});
this.uploadImg(fileList);
},
// 上传图片
uploadImg(file) {
let _this = this;
var imgUrl = [];
// 多张图片上传
for (var i = 0; i < file.length; i++) {
wx.uploadFile({
url: baseUrl + forumUploadImg, //写自己的路径
filePath: file[i].path,
name: "img",
formData: {
img: file[i].path,
},
success: function (res) {
},
});
}
},