elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传

上传组件点击按钮后会直接弹出选择文件框，那么在这中间文件框弹出之前想要进行提示或者进行其他操作怎么办呢

其实实现起来很简单，既然el-upload中的button按钮点击会直接弹出文件选择框，那么我将按钮放在外面模拟上传按钮，提示或操作完成后再触发上传，弹出文件选择框继续上传即可。

点击按钮，若没有选择需求，则会弹出确认框

我的需求是上传之前需要有个下拉选需要勾选，如果没有勾选，或先弹出一个确认提醒框提示回去选择还是继续上传。上代码

template

<el-uploadclass="upload-demo":action="url"ref="upload":show-file-list="false"accept=".xlsx,.xls":before-upload="beforeUploadFile":on-success="uploadSuccess":data="upLoadText"/>
<el-button type="primary" @click="upLoadFile">xls格式</el-button>
<span>请首先下载xls格式的导入模板导入</span>

这里把上传按钮放在上传组件外面，其实不属于上传组件了。upload组件内不再需要按钮

methods

upLoadFile() {// 判断是否选择了需求，若没有选则提示if (this.selectedRequirement) {// 若已经选择了需求，直接选择文件上传this.toSelectFile()} else {// 若未选择需求，则提示选择this.$confirm('您未选择关联需求，请确认！如无需关联请点击确定继续','提示',{confirmButtonText: '确定',cancelButtonText: '去选需求',type: 'warning'}).then(() => {this.toSelectFile()}).catch((error) => error)}
},
// toSelectFile方法可以是自己需要做的操作，然后继续选择文件上传
toSelectFile() {this.upLoadText = {creator: window.sessionStorage.getItem('accountName')fileName: this.fileName,requirement: this.selectedRequirement      }// 触发upload组件内部点击事件，弹出文件选择框this.$refs['upload'].$refs['upload-inner'].handleClick()
},

通过ref逐层触发组件内按钮的handleClick事件，注意区分[‘upload-inner’] 是 upload组件内部的ref

elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传相关推荐

vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框
批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空
点击按钮之后右侧弹出导航，再点击右侧导航隐藏回去的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自[我是干勾鱼的博客] 实现了一个点击按钮之后右侧弹出导航, ...
iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框
我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...
html点击按钮弹出悬浮窗_点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）
以下是弹出窗口代码: 点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; wi ...
VB.net MessageBox弹出的确认对话框点击确定按钮
VB.net MessageBox弹出的确认对话框点击vb.net教程确定按钮 Dim dr As DialogResult = MessageBox.Show("XX", &qu ...
前后端分离微服务管理系统项目实战SaaS-HRM项目(九)——文件上传与PDF报表入门
文章目录九.文件上传与PDF报表入门 1.图片上传 <1>.Data URL (1).概述 (2).入门 (3).基本原理 (4).优缺点分析 <2>.实现用户头像上传 2. ...
通过a标签打开文件选择框实现文件上传
实现代码如下: <script> function addImage(){ document.getElementById_x("image").click(); } ...
vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里 ...
odoo点击按钮弹出确认操作提示框
odoo按钮实现点击弹出提示确认操作并显示提示内容,点击确认执行按钮操作,点击取消不执行按钮操作解决方式: 在button标签中写上confirm属性如下: <button name=&quo ...

elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传

上传组件点击按钮后会直接弹出选择文件框，那么在这中间文件框弹出之前想要进行提示或者进行其他操作怎么办呢

template

methods

elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传相关推荐

最新文章

热门文章