el-upload组件中的on-remove事件自动执行的问题

今天有一个上传两个文件并且不能重复的需求


image1

于是就有了下面的代码


image2

还有一个可以删除文件的功能


image3

然后神奇的一幕就发生了，如图一，再上传同一个文件的时候会触发handleBeforeUpload事件处理函数里的pop方法，会把当前上传的文件对象删除，但是这是handleRemove事件处理函数也跟着触发了......于是就产生了可以上传重复文件的bug

解决方法

通过查看element官网解释：


image4

删除的时候拿到该文件对象，文件对象中有一个status字段，判断这个字段为success的时候再执行删除时的代码就行啦


image5

改造后的代码
iamge6
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容