el-upload上传文件和表单一起提交+后端接收代码
2023-02-18 16:42:09 时间
一、前言
我们在做前端时,会遇到这样的需求,上传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){
}
七、总结
这样就可以完成上传的文件和表单一起请求后端接口,解决了您的问题,一键三联走起来!!!谢谢大家
相关文章
- 最全面的C#/.NET/.NET Core学习视频汇总
- uni-app&H5&Android混合开发一 || 最全面的uni-app离线打包Android平台教程
- 将Js数组对象中的某个属性值升序排序,并指定数组中的某个对象移动到数组的最前面
- 【最全面】SourceTree使用教程详解(连接远程仓库,克隆,拉取,提交,推送,新建/切换/合并分支,冲突解决,提交PR)
- 全面概述Gitee和GitHub生成/添加SSH公钥
- Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面,实现单页面的效果
- 微信公众号支付提示当前页面的URL未注册
- 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法
- Java面试题之:raft 协议和 zab 协议区别
- 租房“免押金”大面积落地,年底租房人群迎来一点甜
- 简单描述 MySQL 中,索引,主键,唯一索引,联合索引 的区别,对数据库的性能有什么影响(从读写两方面)
- 面试官问:Stream 中的 map、peek、foreach 方法的区别?彻底懵了。。
- 广电5G:“农村包围城市”还是内容创新为王?
- 华为、苹果竞争未完,平板赛道再成舞台
- 月销10万+!长城汽车全面发力“森林式生态体系”结硕果
- 鲲鹏生态下,长沙“计算”产业再登新高度
- 盘点四大运营商的5G套餐亮点,国庆出游上车5G不用愁!
- 帮您总结了面试中常用的PHP函数,您不进来看看吗?
- 面试过程中Mysql数据库常被问到的问题详解
- 面向对象是面试时提问最多的吗?