详解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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php简单判断文本编码的方法
2015/07/30 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python发送邮件功能实现代码
2016/07/15 Python
python实现list由于numpy array的转换
2018/04/04 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Python通过字典映射函数实现switch
2020/11/06 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
劳动竞赛口号
2014/06/16 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
党支部季度考核意见
2015/06/02 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android