详解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静态的动态
Sep 18 Javascript
通过修改referer下载文件的方法
May 11 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jquery实现倒计时功能
Dec 28 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
详解React之key的使用和实践
Sep 29 Javascript
JS中一些高效的魔法运算符总结
May 06 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
最简单的PHP程序--记数器
2006/10/09 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JS模拟多线程
2007/02/07 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
详解Python中的join()函数的用法
2015/04/07 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
董事长岗位职责
2013/11/30 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
党建工作整改措施
2014/10/28 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Vue如何清空对象
2022/03/03 Vue.js
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android