解决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 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue实现顶部菜单栏
Nov 08 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
PyQt5实现拖放功能
2018/04/25 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python实现感知器算法(批处理)
2019/01/18 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
什么时候用assert
2015/05/08 面试题
高中自我评价分享
2013/12/05 职场文书
英语感恩演讲稿
2014/01/14 职场文书
项目总经理岗位职责
2014/02/14 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
社团活动总结报告
2014/06/27 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书