详解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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
vue 实现锚点功能操作
Aug 10 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
JS 网站性能优化笔记
2011/05/24 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
存储过程和函数的区别
2013/05/28 面试题
购房协议书范本
2014/04/11 职场文书
投标承诺书怎么写
2014/05/24 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Nginx配置之禁止指定IP访问
2022/05/02 Servers