解决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 相关文章推荐
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
如何查看python关键字
2021/01/17 Python
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
事业单位竞聘上岗实施方案
2014/03/28 职场文书
电影建国大业观后感
2015/06/01 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
MySQL root密码的重置方法
2021/04/21 MySQL
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android