使用場景

使用a-upload提交檔案時，往往會攜帶其他需要手動輸入的資訊，a-upload元件本身雖然提供了上傳前校驗的方法beforeUpload，但該方法是在選擇檔案後才會進行，這是官方文件的描述：

上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 則停止上傳。支援返回一個 Promise 物件，Promise 物件 reject 時則停止上傳，resolve 時開始上傳（ resolve 傳入 File 或 Blob 物件則上傳 resolve 傳入物件）。注意：IE9 不支援該方法。

如果使用者想要在選擇上傳檔案之前校驗（如input輸入框的內容是否符合規則）則該方法無法支援

解決思路

用@change方法監控需要校驗的內容，當內容不通過校驗時上傳按鈕不啟用，通過校驗後點選上傳按鈕才可以上傳檔案

注意事項

onChange方法中不要使用vue的雙向繫結獲取校驗內容，因為onChange觸發時的實際內容為輸入前的值，由此可見這樣都比較不好，所以antd給你提供了e，目的就是想讓你當前輸入用e.target.value來獲取 而不是用getFieldValue獲取當前輸入值。

實現程式碼

頁面部分程式碼

<a-form :form="excelform" autocomplete="off">
    <!-- 示例,上傳檔案前要校驗姓名電話必須填寫 -->
    <a-form-item :md="8" :sm="24" label="姓名">
        <a-input @change="checkUpload($event.target.value, 0)" :v-model="username" name="username" />
    </a-form-item>
    <a-form-item :md="8" :sm="24" label="電話">
        <a-input @change="checkUpload($event.target.value, 1)" :v-model="usertel" maxLength="11" name="usertel" />
    </a-form-item>
</a-form>
<!-- 未通過校驗時,按鈕點選功能為校驗和提示,已通過校驗是按鈕功能為上傳，使用同一個標誌位來控制兩個不同功能的按鈕不會一起顯示 -->
<a-button v-show="!isUpload" type="primary" style="margin-bottom:10px;" @click="beforeUploadCheck">excel匯入</a-button>
<a-upload v-show="isUpload" accept=".xls,.xlsx" :showUploadList="false" :customRequest="selfUpload" :beforeUpload="beforeUpload" ref="upload">
    <a-button ref="beforeUpload" type="primary" style="margin-bottom:10px;">excel匯入</a-button>
</a-upload>

onChange監聽部分程式碼

checkUpload(value, type) {
	//由於運營商在不斷申請新號段，實際專案中不建議將手機號校驗做的太過細緻
    var moblieCheck = /^1\d{10}$/;
    if(type == 1){
        if(this.username == null || this.username == ''){
            this.isUpload = false;
            return ;
        }
        if(!moblieCheck.test(value)){ //此處不要使用vue的雙向繫結獲取當前內容，使用@change傳遞的資料
            this.isUpload = false;
            return ;
        }
    }else{
        if(value == null || value == ''){  //此處不要使用vue的雙向繫結獲取當前內容，使用@change傳遞的資料
            this.isUpload = false;
            return ;
        }
        if(!moblieCheck.test(this.usertel)){
            this.isUpload = false;
            return ;
        }
    }
    this.isUpload = true;
},

校驗和提示部分程式碼

beforeUploadCheck(){
    if(this.username == null || this.username == ''){
        this.isUpload = false;
        this.$message.error('姓名必須填寫');
        return ;
    }
    //由於運營商在不斷申請新號段，實際專案中不建議將手機號校驗做的太過細緻
    var moblieCheck = /^1\d{10}$/;
    if(!moblieCheck.test(this.usertel)){
        this.isUpload = false;
        this.$message.error('電話號碼格式不正確');
        return ;
    }
}

校驗檔案,這裡是校驗檔案是excel

beforeUpload(file) {
    const isExcel =
        file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel';
    //此處需要特別注意，使用file.type進行校驗是不可靠的，並非所有系統和瀏覽器都能獲取file.type的資訊，比如同為chrome，在mac環境是無法獲取到file.type的
    var suffix = file.name.substr(file.name.lastIndexOf("."));
    if (!isExcel && (".xls" != suffix && ".xlsx" != suffix)) {
        this.$message.error('請上傳excel檔案');
    }
    const isLt2M = file.size / 1024 < 20000 && file.size / 1024 > 5;
    if (!isLt2M) {
        this.$message.error('檔案大小應在10KB~20MB之間');
    }
    return isExcel && isLt2M;
}

上傳檔案方法

selfUpload({ action, file, onSuccess, onError, onProgress }) {
    let formData = new FormData();
    formData.append('file', file);
    formData.append('username', this.username);
    formData.append('usertel', this.usertel);
    excelUpload(formData)  //上傳檔案的js，這裡不放出了
        .then(res => {
            if (res == 200) {
                this.$message.success('操作成功');
            }else{
                this.$message.error('操作失敗');
            }
        })
        .finally(() => {
            //處理無論成功失敗必定進行的程式碼
        });
}

後記

作為adnt框架的新手，在想到需要選擇檔案前進行校驗的需求後查閱官方文件並沒有得到滿意的結果，於是自己想出了這麼一個“偏門”的解決方案達到了近似的效果