解决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 相关文章推荐
js获取变量
Aug 24 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
js对象的比较
Feb 26 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
JS class语法糖的深入剖析
Jul 07 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执行速度全攻略
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js 操作符实例代码
2009/10/24 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
canvas绘制七巧板
2017/02/03 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
结对共建工作方案
2014/06/02 职场文书
高一数学教学反思
2016/02/18 职场文书