element 上传过程中不可重复点击按钮不弹窗

原创已于 2023-08-31 11:25:12 修改 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-08-31 11:24:11 首次发布

element 专栏收录该内容

23 篇文章

订阅专栏

博客展示了前端文件上传的代码，使用了el-upload组件，可上传Excel文件，指定了上传地址、请求头、数据等。同时给出了上传中及上传成功的处理函数，上传中显示加载状态，成功则提示信息并执行搜索操作，失败则提示错误信息。

<el-upload
v-if="typeid==null"
class="upload-demo"
action="/data-service/FileUploadAction/houseManager"
accept=".xls, .xlsx"
:data="uploadData"
:headers="uploadHeaders"
:show-file-list="false"
:on-progress="uploading"
:on-success="uploadSuccess"
>
<el-button v-if="!cusLoading" class="button" type="primary">客户分配</el-button>
<el-button v-else slot="tip" type="primary" disabled>客户分配</el-button>
<div slot="tip" class="el-upload_tip">支持扩展名：Excel</div>
</el-upload>

uploading() {
this.cusLoading = true;
},
uploadSuccess(response, file, fileList) {
if (response.success === true) {
this.$message.success(response.msg);
this.search();
this.cusLoading = false;
}else{
this.cusLoading = false;
this.$message.error(response.msg);
}
},