Problem Description
The el-upload upload file button of element-ui can still be clicked after the select file button is disabled, as shown below: the
click button has been grayed out, but the image selection pop-up window can still be clicked. Although it cannot be uploaded, the experience is not good.
Cause Analysis:
I heard it's because: disabled only disables the click event, but does not disable opening the file selection window.
solution:
method one:
Attached code:
<el-upload
action="/api/expense-core/pco/v1/expense/new/uploadFile"
:headers="headers"
:limit="1"
:file-list="uploadFileList"
name="multipartFile"
:before-upload="beforeLogoUpload"
:on-remove="handleChange"
:on-success="handleNewBannerSuccess"
:on-error="onUploadError"
>
<el-button type="text" v-if="!canClick">点击上传</el-button>
<el-button v-else slot="tip" type="text" disabled>点击上传</el-button>
<div slot="tip">
支持一个附件上传，假如需要上传多个附件，请打包后上传，且附件最大30MB。
</div>
</el-upload>
headers: {
'x-auth-token': localStorage.getItem('token') },
uploadFileList: [],
fileName: '',
this.form: {
attachFileUrl: '',
}.
//上传限制条件
beforeLogoUpload(file) {
if (file && file.name) {
this.fileName = file.name;
}
const size = Math.ceil(file.size / 1024 / 1024);
if (size > 30) {
this.uploadFileList = [];
this.$notify({
message: '单个附件最大30MB。',
type: 'error',
});
return false;
}
return true;
},
handleChange(file) {
this.uploadFileList = this.uploadFileList.filter(file2 => {
return file2.uid !== file.uid;
});
},
handleNewBannerSuccess(response) {
if (Number(response.code) === 0) {
let fileList = {
url: response.file_path,
name: this.fileName,
};
this.uploadFileList = this.uploadFileList.concat(fileList);
this.form.attachFileUrl = response.file_path;
}
},
onUploadError() {
this.$notify.error({
title: '提示',
message: '上传失败，请检查网络或文件大小',
});
},
computed: {
canClick: function () {
if (this.uploadFileList.length >= 1) {
return true;
} else {
return false;
}
},
},
Method Two:
Replace it with a fake button:
<el-button type="text" v-if="!canClick">点击上传</el-button>
<div
v-else
@click.stop
class="el-button el-button--text el-button--small is-disabled">
<span>点击上传</span>
</div>
The above is a text button. If you want a basic button, you need to el-button--textchange the style toel-button--primary
After that, it will be fine. As shown in the picture below, it will not be clickable:
