實現方式：
設置 Upload :auto-upload="false" 為手動上傳
將表單數據通過 :data={} 上傳文件傳遞參數的方式傳遞給后台
<el-form-item label="上傳文件："> <el-upload ref="upload" :data="carryData" :before-upload="beforeFile" :on-change="changeFile" :on-success="successFile" :action="ContinueImporting" :file-list="fileList" :multiple="false" :show-file-list="false" :limit="1" :auto-upload="false"> <el-button slot="trigger" size="small" type="success" plain>選取文件</el-button> </el-upload> </el-form-item>
js:
methods:{ beforeFile(file){ //上傳文件之前的鈎子 判斷文件格式 let index = file.name.lastIndexOf('.'); let filetype = file.name.slice(index + 1); if(filetype === 'xls' || filetype === 'xlsx'){ return true }else{ this.$message.error('文件格式錯誤，請選擇 xls 或 xlsx 格式的文件！'); return false } }, changeFile(file,filelist){ //文件狀態改變時的鈎子 把filelist 賦值給data中的filelist this.fileList = [...filelist] }, submit(){ if(this.fileList.length){ // 判斷data中的filelist是否有數據 沒有則未選中文件 this.carryData = { //將需要傳遞給后台的數據賦值給攜帶參數 batchNo:this.NotRevise.batchNo, batchStatus:this.NotRevise.batchStatus, client:this.NotRevise.client, date:this.NotRevise.date, remark:this.formData.remark, } setTimeout(()=>{ this.$refs.upload.submit(); //手動上傳文件 },1) }else{ this.$message.error('請選擇文件'); } }, successFile(response, file, fileList){ console.log(response) } }
使用這個方式傳遞數據時 在手動上傳文件的時候必須使用異步任務 否則在提交時並不能拿到表單數據
在使用定時器之后手動上傳文件時就不會出現這個問題