el-upload上传文件和表单一起提交+后端接收代码
文章目录
一、前言
二、前端页面展示
三、表单代码
四、Data部分
五、JS方法
六、后端接收方式
七、总结
一、前言
我们在做前端时,会遇到这样的需求,上传Excel文件,并且还要和填写的表单数据,一起发送.我们知道el-upload默认的是选中文件后直接请求到后端的接口.现在就需要我们修改这种默认的上传形式,和填写完的form表单一起请求后端接口.
二、前端页面展示
三、表单代码
<el-dialog title="导入源数据库表单信息" :visible.sync="dialogVisible1"> <el-form ref="importFormRef" :model="importForm" :rules="importFormRules" label-width="130px"> <el-form-item label="病种kgCode:" prop="kgCode" > <el-input v-model="importForm.kgCode" ></el-input> </el-form-item> <el-form-item label="目标数据库URL:" prop="targetUrl" > <el-input v-model="importForm.targetUrl"></el-input> </el-form-item> <el-form-item label="目标数据库账号:" prop="targetUsername" > <el-input v-model="importForm.targetUsername"></el-input> </el-form-item> <el-form-item label="目标数据库密码: " prop="targetPassword" > <el-input v-model="importForm.targetPassword"></el-input> </el-form-item> <el-form-item label="上传文件:" prop="excel"> <el-upload class="upload-demo" ref="upload" action<!-- 这里比填,异步时写后端接口,就可以,我们不用,所以不谢--> :http-request="httpRequest"<!--覆盖默认的上传行为,可以自定义上传的实现--> :before-upload="beforeUpload"<!--这是上传前的处理方法--> :on-exceed="handleExceed"<!--文件超出个数限制时的钩子--> :limit="1"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传.xlsx文件,且不超过5M</div> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitImportForm">开始导入</el-button> <el-button type="info" @click="dialogVisible = false">关闭窗口</el-button> </el-form-item> </el-form> </el-dialog>
四、Data部分
//对话框控制权 dialogVisible1:false, //导入表单数据 importForm:{ kgCode:'', targetUrl:'', targetUsername:'', targetPassword:'', }, //存放上传文件 fileList: []
五、JS方法
// 覆盖默认的上传行为,可以自定义上传的实现,将上传的文件依次添加到fileList数组中,支持多个文件 httpRequest(option) { this.fileList.push(option) }, // 上传前处理 beforeUpload(file) { let fileSize = file.size const FIVE_M= 5*1024*1024; //大于5M,不允许上传 if(fileSize>FIVE_M){ this.$message.error("最大上传5M") return false } //判断文件类型,必须是xlsx格式 let fileName = file.name let reg = /^.+(\.xlsx)$/ if(!reg.test(fileName)){ this.$message.error("只能上传xlsx!") return false } return true }, // 文件数量过多时提醒 handleExceed() { this.$message({ type: 'error', message: '最多支持1个附件上传' }) }, //导入Excel病种信息数据 submitImportForm() { // 使用form表单的数据格式 const params = new FormData() // 将上传文件数组依次添加到参数paramsData中 this.fileList.forEach((x) => { paramsData.append('file', x.file) }); // 将输入表单数据添加到params表单中 params.append('kgCode', this.importForm.kgCode) params.append('targetUrl', this.importForm.targetUrl) params.append('targetUsername', this.importForm.targetUsername) params.append('targetPassword', this.importForm.targetPassword) //这里根据自己封装的axios来进行调用后端接口 this.httpPostWithLoading(IMPORT_URL,paramsData).then(match => { if (match.success) { this.$message({ message: "导入成功", type: "success" }) }else{ this.$message({ message: "导入失败", type: "error" }) } this.$refs.importFormRef.resetFields()//清除表单信息 this.$refs.upload.clearFiles()//清空上传列表 this.fileList = []//集合清空 this.dialogVisible1 = false//关闭对话框 }) }
六、后端接收方式
@PostMapping("/importExcel") public JsonResult importExcel(MultipartFile file, String kgCode, String targetUrl, String targetUsername, String targetPassword){ }
七、总结
这样就可以完成上传的文件和表单一起请求后端接口,解决了您的问题,一键三联走起来!!!谢谢大家