使用vant-uploader上传照片无法删除的解决_vue.js_

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’为自定义的删除照片的操作：

在JS里，写自己需要进行的操作：

 deleteImg(event){ let index= event.detail.index console.log(index)//输出的就是图片所在fileList的下标，自己根据需要进行操作就行 },

一些关于vant-uploader的前端问题

首先要引入vant和vue，参考官方地址。vant-uploader的定义，实现和引入详见官方地址，这里不再一一列举。

本文写一些前端开发方面遇到的问题。

1.afterRead和beforeRead有时不能同时执行的问题。

解决方案：beforeRead要执行返回True之后才可以执行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

3.一些样式的修改具体参考官网api或者直接修改vant.css里关于uploader的css样式即可。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！