wxml部分
<van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" />
js部分
afterRead:function(event) {
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
var obj={}
obj.path=file;
this.uploadimg(obj);
},
uploadimg:function(data) {
wx.showLoading({
title:'上传中...',
mask:true,
})
var that =this,
i = data.i ? data.i :0,
success = data.success ? data.success :0,
fail = data.fail ? data.fail :0;
let userInfo=wx.getStorageSync('userInfo');
let peopleId=userInfo.peopleId;
var picture_list = that.data.picture_list;
wx.uploadFile({
url: baseUrl +'impl/uploadImg',
filePath: data.path[i].path,
name:'file',
formData: {
'type':1,
'peopleId':peopleId,
},
success: (res) => {
wx.hideLoading();
success++;
let obj = JSON.parse(res.data).data;
if(obj.hasOwnProperty('url')){
picture_list.push({
url:obj.url,
id:obj.id
});
that.setData({
picture_list
})
}
},
fail: (err) => {
wx.hideLoading();
wx.showToast({
title:'上传失败!',
icon:'none'
})
fail++;
},
complete: () => {
i++;
if (i == data.path.length) {//当图片传完时,停止调用
}else {//若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);//递归,回调自己
}
}
});
},
deleteImg(e) {
let index=e.detail.index;
console.log(index);
let {picture_list}=this.data;
let that=this;
wx.showModal({
content:'确定删除?',
success: (res) => {
if (res.confirm) {
picture_list.splice(index,1);
that.setData({
picture_list
})
console.log(that.data.picture_list);
}else if (res.cancel) {
console.log('用户点击取消')
}
},
})
},