600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > elementUI中upload上传组件点击上传按钮 选择文件框弹出前进行提示点击确定则继续弹

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

时间:2022-08-05 01:17:11

相关推荐

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上传组件点击上传按钮 选择文件框弹出前进行提示点击确定则继续弹框选择文件上传

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。