一、前言

我们在做前端时,会遇到这样的需求,上传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){
}

七、总结

这样就可以完成上传的文件和表单一起请求后端接口,解决了您的问题,一键三联走起来!!!谢谢大家

el-upload上传文件和表单一起提交+后端接收代码的更多相关文章

  1. Java中上传文件和表单数据提交如何保持数据的一致性?

    学生申请学科竞赛活动,表单中有学科竞赛的申报信息和部分附件,需要做到将上传文件和表单数据提交保持一致性. 将上传文件和插入表单数据放到事务汇总去处理,由于表单的数据我们可以控制,但是上传的文档不好控制 ...

  2. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  3. Struts Upload上传文件

    1.Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.te ...

  4.  为什么上传文件的表单里要加个属性enctype----摘录

    上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上传表单要这么写,知其然而不知其所以然.那到底为什 ...

  5. element-ui upload上传文件并携带参数 使用formData对象

    需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...

  6. tp中附件上传文件,表单提交

    public function tianjia(){ $goods=D('Goods'); if(!empty($_POST)){ if($_FILES['f_goods_image']['error ...

  7. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  8. 为什么上传文件的表单里面要加一个属性enctype=multipart/form-data?

    首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选:1.application/x-www-form-urlencoded2.multipart/form-data3.text/ ...

  9. thinkphp Upload上传文件在客户端生成的临时文件$_FILES['file']['tmp_name']

    1.关于thinkphp 的Upload的$_FILES['file']['tmp_name'] 在使用thinkphp上传图片的时候,在上传的$_FILES数组中,有一个$_FILES['file' ...

随机推荐

  1. React refs 的理解

    一.是什么 Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render ...

  2. 使用bind部署DNS主从服务器

    说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独搭建主从DNS服务器的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需要查看相关软件版 ...

  3. 记一次lombok踩坑记

    引言 今天中午正在带着耳机遨游在代码的世界里,被运营在群里@了,气冲冲的反问我最近有删生产的用户数据的吗?我肯定客气的回答道没有呀?生产的数据我怎么能随随便便可以删除,这可是公司的红线,再说了我也没有 ...

  4. python算法学习--待续

    几个算法网站 算法可视化网站:https://visualgo.net/en,通过动画展示算法实现过程 程序可视化网站:http://www.pythontutor.com/visualize.htm ...

  5. Linux的磁盘管理和进程管理(入门)

    查看磁盘使用情况 df :列出文件系统整体的磁盘使用量 增加-h参数可以使得显示的容量更人性化 du:检查磁盘空间使用量---需要进入文件中查看 挂载本地磁盘或文件 mount mount /dev/ ...

  6. Spring Boot从入门到精通(十一)集成Swagger框架,实现自动生成接口文档

    Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.Swagger 是一组开源项目,其中主要要项目如下: Swagger-tools:提供各种与S ...

  7. RAID磁盘阵列和RAID配置

    目录 一.RAID磁盘阵列介绍 二.RAID磁盘阵列分类 2.1.RAID 0(条带化存储) 2.2.RAID 1(镜像存储) 2.3.RAID 5 2.4.RAID 6 2.5.RAID 1+0和0 ...

  8. 面试官疯狂问我:char和varchar的区别 怎么办?愣着干嘛?进来白嫖啊!

    MySQL的修仙之路,图文谈谈如何学MySQL.如何进阶!(已发布) 面前突击!33道数据库高频面试题,你值得拥有!(已发布) 大家常说的基数是什么?(已发布) 讲讲什么是慢查!如何监控?如何排查?( ...

  9. CentOS 永久修改系统时间

    1.查看当前系统时间 date       2.修改当前系统时间 date -s "2018-2-22 19:10:30       3.查看硬件时间 hwclock --show      ...

  10. windows本地挂载HDFS

    1.修改配置文件 进入配置文件目录: cd ${HADOOP_HOME}/etc/hadoop 修改core-site.xml: vim core-site.xml 在文件中增加以下内容: <p ...