element-ui的el-upload上传文件按钮在选取文件按钮禁用后仍可点击问题

问题描述

element-ui的el-upload上传文件按钮在选取文件按钮禁用后仍可点击，如下图：

点击按钮已经置灰，但是仍能点开选择图片弹窗，虽然无法上传，但是体验不好。

---

原因分析：

听说是因为：disabled只是禁用了点击事件，并没有禁用打开文件选择窗口

---

解决方案：

方法一：

附代码：

        <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;
      }
    },
  },

方法二：

换成一个假的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>

以上是文字按钮，想要基础按钮，需要将样式el-button--text换为el-button--primary

之后便可以了，如下图所示，便不可点击：

这篇好文章是转载于：学新通技术网