<el-dialog title="导入" :visible.sync="showExportDialog" > <el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px"> <el-form-item label="excel文件" prop="file"> <el-upload style="display: inline-block;margin-left: 10px" class="upload-demo" ref="upload" accept=".xls,.xlsx" :data="addForm" // 发送请求的参数对象 :auto-upload="false" // 取消自动上传,获取file对象后先等一下 :action="uploadFileUrl" // 提交表单的url :headers="headers" //请求头 :show-file-list="false" :on-success="handleUploadSuccess" :on-change="changeFile" > <span v-if="curName">{{curName}}</span> <el-button type="primary" icon="" v-else>选文件</el-button> </el-upload> </el-form-item> <el-form-item label="纸质扫描附件" prop="annexUrl"> <fileUpload :isShowTip="false" :value="addForm.annexUrl" :limit="1" @input="getFileList" :fileType="['png','jpg','jpeg']"> </fileUpload> </el-form-item> <el-form-item label="培训现场其它说明" prop="notes" v-if="data_type==='train'"> <el-input type="textarea" v-model="addForm.notes"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="submitComplete">确 定</el-button> </span> </el-dialog>
script部分
changeFile(file){ this.curName = file.name; // 必须,选择文件后可把文件名展示出来,否则感觉没有选中文件一样。 }, // 导入成功 handleUploadSuccess(res, file) { console.log('res',res); if (res.code !== 200) { return this.$alert(res.message, { dangerouslyUseHTMLString: true }); } else { this.closeDialog(); this.pageList(); } },
getFileList(filesList) {//纸质扫描附件,这里给参数对象的annexUrl赋值 this.addForm.annexUrl= ''; filesList?.forEach(el=>{ this.addForm.annexUrl = el.url; }) },
// 导入:提交表单 submitComplete() { console.log(this.addForm) this.$refs.addForm.validate(async (valid) => { if (valid) { this.$refs.upload.submit(); // 表单验证后这里直接调用el-upload组件自带的click方法。 } }); },
遇到的问题:
1、必须在上传组件el-upload组件上传,传递file(formData)类型的文件对象,表单验证后再传递(即使封装成formData)永远无法触发后台接口。
2、此时当选择的excel文件为必选项,则表单验证无法进行,因为file是el-upload自带的参数key,此时若再在addForm内部加一个file验证,则请求时会有两个file值,且是不对的。(待解决这个问题再来更新。)
标签:el,res,addForm,upload,表单,file,上传 From: https://www.cnblogs.com/LindaBlog/p/17797248.html