解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题


Posted in Javascript onAugust 24, 2018

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传。

项目中用的element-ui是V1.4.3

<el-upload
   class="upload-demo" drag
   ref="fileUpload"
   :action="urls.fileUpload"
   :on-success="handleUploadSuccess"
   :on-error="handleUploadError"
   :on-progress="progressUpload"
   :before-upload="beforeUpload"
   show-file-list
   multiple>
   <i class="el-icon-upload"></i>
  <div class="el-upload__text">点击上传,或者拖拽到这里</div>
 </el-upload>

解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

代码中我是将before-upload方法返回false,然后点击确认之后,调_this.$refs.fileUpload.submit();但是在点击确定之后,文件还是没有上传,后面去看了element-ui源码,发现before-upload方法如果返回false,submit()方法是会被拦截的。
还有第二个问题,就是取消时_this.$refs.fileUpload.clearFiles();我调的clearFiles()方法,这个方法会把文件列表全部清空,我只想删除我当时取消的那个文件。
后面将这两句换成了如下两句:

解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

继续上传: _this.$refs.fileUpload.$children[0].post(file);

取消时在文件列表中删除该文件:_this.$refs.fileUpload.handleRemove(file);

补充:VUE2.0 element upload使用

<template>
 <div class="uptemp">
  <el-upload
   class="upload-demo"
   ref="upload"
   multiple="false"
   action="/web/api/uploadFile"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :on-change="handleChange"
   :before-upload="beforeUpload"
   :file-list="fileList"
   :auto-upload="false"
   :multiple="false">
   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
  </el-upload>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    fileList: []
   }
  },
  mounted: function () {
   //加载完页面执行的函数
  },
  methods: {
   submitUpload() {
    this.$refs.upload.submit();
   },
   handleRemove(file, fileList) {
    console.log(file, fileList);
   },
   handlePreview(file) {
    console.log(file);
   },
   handleChange(file, fileList){
    console.log(file);
    console.log(fileList);
   },
   beforeUpload: function (file) {
    console.log(file)
    //这里是重点,将文件转化为formdata数据上传
    let fd = new FormData()
    fd.append('file', file)
    this.$http.post('/web/api/uploadFile', fd).then((res) => {
     console.log(res)
    }, (res) => {
     console.log(res)
    });
    return false;
   }
  },
  components: {
//      组件
  }
 }
</script>
<style scoped>
</style>
<style>
 .uptemp .el-upload-list {
  position: absolute;
  left: 140px;
  top: 0;
  width: 50%;
 }
 .uptemp {
  position: relative;
 }
 .uptemp .el-upload-list .el-upload-list__item {
  margin-top: 0;
 }
</style>

总结

以上所述是小编给大家介绍的解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
You might like
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
html下载本地
2006/06/19 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Win8下python3.5.1安装教程
2020/07/29 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Python实现上下文管理器的方法
2020/08/07 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
乡镇食品安全责任书
2014/07/28 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
详解TypeScript的基础类型
2022/02/18 Javascript
Java字符串逆序方法详情
2022/03/21 Java/Android
MSSQL基本语法操作
2022/04/11 SQL Server