解决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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
layui table 表格模板按钮的实例代码
Sep 21 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
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
详解python运行三种方式
2019/05/13 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
植树节活动总结
2014/04/30 职场文书
测控技术自荐信
2014/06/05 职场文书
财务会计专业自荐书
2014/06/30 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
普通话演讲稿
2014/09/03 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书