vant-uploader上传照片无法删除
在微信小程序使用vant-uploader上传图片时 ，发现点击右上角的小叉叉无法删除图片 ，查看了源码：
（源码位置：miniprogram\miniprogram_npm@vant\weapp\uploader\index.js）
deleteItem: function (event) {
var index = event.currentTarget.dataset.index;
this.$emit(
delete,
__assign(__assign({}, this.getDetail(index)), {
file: this.data.fileList[index],
})
);
},
发现里面点击删除只是向父组件传递了一个名为’delete’的事件 ，该事件包含点击的图片的下标 。为了达到删除的目的 ，我们还需自己定义对应的删除函数 。
解决方法
在XML里获取delete事件 ，其中’deleteImg’为自定义的删除照片的操作：
<van-uploader catch:delete="deleteImg" preview->
</van-uploader>
在JS里 ，写自己需要进行的操作：
deleteImg(event){
let index= event.detail.index
console.log(index)//输出的就是图片所在fileList的下标 ，自己根据需要进行操作就行
},
一些关于vant-uploader的前端问题
首先要引入vant和vue ，参考官方地址 。vant-uploader的定义 ，实现和引入详见官方地址 ，这里不再一一列举 。
本文写一些前端开发方面遇到的问题 。
1.afterRead和beforeRead有时不能同时执行的问题 。
解决方案：beforeRead要执行返回True之后才可以执行afterRead 。
<van-uploader :before-read="beforeRead" ：after-read="afterRead" />
export default {
methods: {
beforeRead(file) {
if (file.type !== image/jpeg) {
Toast(请上传 jpg 格式图片);
return false;
}
return true;
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file);
},
},
};
van-uploader允许上传的文件类型默认为image/* ，一般直接写afterRead就可以了 。
2.实现实时向服务器提交 ，删除文件 。
项目需求是上传和删除与服务器同步 ，删除图片的同时需要从服务器端也删除图片 。
由于vant-uploader本质也是image+input实现的 。
原有的方法是给input直接绑定id ，用ajaxFileUploader方法实时更新后台的图片文件 ，缺点是一次性只能选择一张图片 。
于是我们可以动态给vant-uploader控件里的input框动态添加id,以此实现delete时候后端也可以即时删除图片的操作 。
function delImg(index){
let ind = vue.$data.imgContList.indexOF(index);
vue.$data.imgContList.splice(ind,1);
console.log(vue.$data.imgContList);
let delUploader =document/getElementByClassName("van-uploader__preview-delete");
for(let i=0;i<vue.$data.imgContList.length;i++){
$(delUploader[i]).removeAttr("id").attr("id","removeClose_4_"+(vue.$data.imgCountList[i]));
$(delUploader[i]).removeAttr("onclick").attr("onclick","delImg("+(vue.$data.imgCountList[i])+")");
}
}
3.一些样式的修改具体参考官网api或者直接修改vant.css里关于uploader的css样式即可 。
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
