問題描述

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

之后便可以了，如下圖所示，便不可點擊：
文章來源地址http://www.zghlxwxcb.cn/news/detail-509532.html

到了這里，關于element-ui的el-upload上傳文件按鈕在選取文件按鈕禁用后仍可點擊問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！