Vue ElementUi Excel文件和表单内容同时提交

实现方式：

设置 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) } }
使用这个方式传递数据时 在手动上传文件的时候必须使用异步任务 否则在提交时并不能拿到表单数据
在使用定时器之后手动上传文件时就不会出现这个问题