技術標籤：elementvuejsjavascriptvue.js前端html5html

自定義上傳按鈕，非自動上傳，效果圖

action - 就是上傳的介面地址
accept - 是限制上傳檔案格式，設定後只能上傳該格式檔案，
選取-選取按鈕只是選擇了檔案 ，但是並沒有上傳

  <el-upload
            class="upload-demo inline-block"
            :action="commonApi02"
            ref="upload02"
            :
 
on-preview="handlePreview"
            :on-exceed="handleExceed"
            :on-success="fileSuccess"
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
          >
            <el-button slot=
 
"trigger" size="small" type="primary" style="margin-left: 5px">
              選取
            </el-button>

            <el-button style="margin-left: 5px" size="small" type="success" @click="submitUpload">
              上傳
            <
 
/el-button>
            // 可以在這裡設定偽檔案列表
            </el-upload>

主要是上傳按鈕增加click函式並且 :auto-upload=“false”，請求返回的結果可以通過:on-success屬性，定義函式獲得。函式部分程式碼如下：

  // 上傳檔案
    submitUpload() {
      this.$refs.upload02.submit();
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `當前限制選擇 1 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${
          files.length + fileList.length
        } 個檔案`,
      );
    },
    handleChange(file) { //  這個函式中的程式碼是我的專案中的程式碼 --判斷是否應該隱藏偽檔案列表-移除檔名
    //  判斷是否應該顯示偽檔案列表-展示檔名  -我沒有寫在這裡
      if (this.isVoluntarilyFlags.inquireFlags) {  
        this.urlState = false;
        this.urlHtml = '';
      } else if (this.isVoluntarilyFlags.recordFlags) {
        this.urlState = false;
        this.urlHtml = '';
      }
      this.filename = file.name;  // 獲取檔名

      this.$notify({
        title: '選取檔案提示',
        message: '選取檔案為暫存檔案，切換訊息型別會清空暫存檔案哦！',
      });
      this.$notify({
        title: '上傳提示',
        message: '點選上傳按鈕，即可完成暫存檔案上傳！',
      });
    },
    beforeRemove(file) {
      return this.$confirm(`確定移除 ${file.name}？`);
    },
    fileSuccess(res) { 
      if (res.status === '0') {
        this.$message({
          type: 'success',
          message: '上傳成功!',
        });
        this.dialogData.autoSendMessageTaskDO.url = res.data;  //這個 res就是上面設定的上傳檔案成功後返回的資料體
      } else {
        this.$message.error('上傳失敗！');
      }
    },

在上傳檔案後，或者是選擇了檔案後，會生成一個上傳檔案列表，樣式如圖：

但是在點選上面切換時，已上傳檔案列表，或已選擇上傳檔案列表會消失，解決辦法：寫死一個結構，動態替換檔名

     <!-- 偽檔案樣式 -->
            <ul v-if="urlState" class="el-upload-list el-upload-list--text">
              <li tabindex="0" class="el-upload-list__item is-ready">
                <!---->
                <a class="el-upload-list__item-name">
               
                  <i class="el-icon-document"></i>
                  {{ urlHtml --這是檔名 }}
                </a>
                <label class="el-upload-list__item-status-label">
                // 這裡可以手動新增關閉按鈕功能
                  <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                <i class="el-icon-close"></i>
                <i class="el-icon-close-tip"></i>
              </li>
            </ul>

elementui遇到的一些其他問題解決辦法：傳送門