el-upload图片上传，before-upload中的方法返回false时，会触发on-remove绑定的事件

这篇文章主要向大家介绍笔记：el-upload中，before-upload中的方法返回false时，会触发on-remove绑定的事件,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

场景

表单编辑时，要求删除上传的图片后重置某些状态，天然在on-remove中的事件写。然而，当修改上传的图片，且图片不合规时，before-uoload中天然的返回了false，还触发了on-remove事件，可是界面上的图片是在的，不须要你重置状态！！！spa

个人办法

通过对on-remove对应参数的打印，发现回调中的file参数有个status，若是是在before-upload中就被过滤了，就是ready，若是已经上传成功了去点击删除，status是success，就他了。

onRemove(file,fileList){
    if(file.status == 'success'){
        //删除后改变某些状态的代码
    }
    if(file.status == 'ready'){
        //这里应该就是before-upload中返回false时的状况了，还有没有别的状况，未知
    }        
}

图片上传示例：elementUI组件

imageUpload.vue 组件

父组件中引入子组件：

   // .sync 是为了方便父子组件同时修改值
...
data () {
　　return {
　　　　fileList: [ // 编辑时候默认传的数据格式
　　　　　　// {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},

          // {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}

　　　　]
　　}
}

原文地址：https://juejin.im/post/5daff2ede51d4524c118081f

before-upload中返回false时