elementUL手動上傳txt檔案

需求如下：

點選定制航線，從本地選擇檔案

點選打開後直接調取接口

主要代碼如下：

<el-upload
     v-if="item.uploadFlag" // 是否顯示上傳元件
     ref="xlsUpload"
     :style="{ display: 'inline-block' }"
     :auto-upload="false" // 不自動上傳
     :on-change="fileOnChange" // 檔案狀态改變時的鈎子
     :before-upload="beforeUpload" // 上傳檔案之前的鈎子
     :show-file-list="false" // 不顯示已上傳檔案清單
     action=""
     accept=".txt" // 上傳檔案的類型
   >

           

beforeUpload(file) {
     this.uploadFile = file;
     return false; // 停止上傳
   },
   fileOnChange() {
     this.$refs.xlsUpload[0].submit();
     if (!this.uploadFile) {
       this.$message({
         message: '請先選擇檔案',
         type: 'warning'
       });
       return;
     }
     const formData = new FormData();
     formData.append('file', this.uploadFile);
     console.log(this.uploadFile, 'uploadFile');
     this.$confirm('是否上傳航線？', {
       showClose: false,
       type: 'warning'
     })
       .then(() => {
         // 調用上傳方法
         this.$message({
           type: 'success',
           message: '上傳成功!'
         });
       })
       .catch(() => {});
   }

           

我的一個錯誤：

this.$refs.xlsUpload.submit(); （錯誤寫法）

因為我這裡的子菜單是循環出來的，是以this. $refs.xlsUpload是個數組。

報錯：

是以需要擷取到ref數組的第0項。

注意：before-upload

before-upload：上傳檔案之前的鈎子，參數為上傳的檔案，若傳回 false 或者傳回 Promise 且被

reject，則停止上傳。

是以把auto-upload設定為false時，選中檔案後不會觸發上傳事件

before-upload是檔案上傳之前觸發的，是指檔案已經被選中，送出時才會觸發。

是以不手動使用submit方法，是不會觸發before-upload的。

是以需要this.$refs.xlsUpload[0].submit();