详解element上传组件before-remove钩子问题解决


Posted in Javascript onApril 08, 2020

应公司业务要求已上传文件删除前提醒确认代码如下

if(file && file.status === "success"){
      return this.$confirm('此操作将永久删除该文件, 是否继续?', '系统提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
        reject(false);
      });
    };

确认会直接调用on-remove方法具体业务代码如下

if (file && file.status==="success") {
    this.$axios.delete("url" + data);
  }

下面是 before-upload 上传文件前的钩子,在遇到大于10M的文件时,我们返回false

//图片上传前钩子
  beforeUpload(file) {
   this.loading = true;
   const isLt2M = file.size / 1024 / 1024 < 10;
 
   if (!isLt2M) {
    this.loading = false;
    this.$message.error("单个附件大小不能超过 10MB!");
   }
   
   return isLt2M;
   // return false;
  }

但是这时会出现自动调用before-remove on-remove钩子

其实此时我们根本没有上传文件,所以也不会需要删除操作,然后我的代码就报错了。

解决办法如下:

//删除图片
  beforeRemove(file, fileList) {
   let a = true;
   if (file && file.status==="success") {
     a = this.$confirm(`确定移除 ${ file.name }?`);
   }
   return a;
  },
  //删除图片
  handleRemove(file, fileList) {
   if (file && file.status==="success") {
    this.$axios.delete("accessory/one/" + file.response.id).then(resp => {
     if (resp.status == 200) {
      this.$message({
       message: "删除成功",
       type: "success"
      });
     }
    });
   }
  },

把不需要执行的代码放入判断内。

if (file && file.status==="success") {
}

到此这篇关于详解element上传组件before-remove钩子问题解决的文章就介绍到这了,更多相关element上传组件before-remove钩子内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
使用console进行性能测试
Apr 27 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
js实现五星评价功能
Mar 08 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
js实现表格数据搜索
Aug 09 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 #Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 #Javascript
JS async 函数的含义和用法实例总结
Apr 08 #Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
You might like
yii框架源码分析之创建controller代码
2011/06/28 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
微信小程序实现左右列表联动
2020/05/19 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Django 视图层(view)的使用
2018/11/09 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python flask安装和命令详解
2019/04/02 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
django rest framework serializers序列化实例
2020/05/13 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
主要的Ajax框架都有什么
2013/11/14 面试题
造价工程师个人求职信
2013/09/21 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
使用Python解决图表与画布的间距问题
2022/04/11 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python