在微信小程序使用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的下标,自己根据需要进行操作就行
},