ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
场景
需要将Excel中的数据导入到数据库中,就会用到文件上传的功能。
这里使用ElementUI的el-upload控件实现文件上传。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先在页面上添加一个el-upload控件
<el-uploadref="upload":limit="1"accept=".xlsx, .xls":headers="upload.headers":action="upload.url":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false":data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据<el-linktype="info"style="font-size:12px"@click="downloadTemplate('lxszTemplate.xlsx')">下载模板</el-link></div><div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div></el-upload>
然后设置它的一些属性
limit设置只能单选一个文件,默认是多选。
accept设置可接受选择的文件类型。
headers设置上传的请求头
action设置上传的地址
disabled设置什么时候禁用。
on-progress文件上传时的钩子
on-success文件上传成功的钩子
auto-upload设置是否自动提交
data设置传递的参数
这里一些参数封装进了一个upload对象,需要声明对象并设置对象的一些值。
// 导入参数upload: {// 是否显示open: false,// 弹出层标题title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/kqgl/lxsz/importData",},
其中设置上传的请求头时的getToken是获取令牌跳过登录验证的方法
它来自于下面的js
import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}
然后设置上传地址中process.env.VUE_APP_BASE_API 是在全局的precess中获取在vue.config.js中配置的接口代码的地址
proxy: {[process.env.VUE_APP_BASE_API]: {target: `http://localhost:8080`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},
这里是我本地的8080端口
然后加上SpringBoot后台配置的Url。
上面还设置了文件上传中的处理钩子函数和上传成功的钩子函数
// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},// 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.open = false;this.upload.isUploading = false;this.$refs.upload.clearFiles();this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });this.getList();},
在上传中时将此控件设置为禁用,上传成功后将此对话框关闭,将上传控件启用,清理选择的文件,提示导入结果,刷新数据列表。
如果不加data进行传递的额外的参数时,默认会向后台传递一个名字为file的文件
在Springboot中使用
@RequestParam MultipartFile file
接受即可。如果想要传递额外的参数,就使用上面的格式去传递即可。
:data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"
选择好文件后没有自动进行提交,设置的是手动提交,在确定按钮的点击事件中
submitFileForm() {this.$refs.upload.submit();},
将其进行提交,其中el-upload设置的ref="upload"就可以在这里进行提交。
然后在action对应的后台Springboot接口方法中
@RequestMapping("/importData")@ResponseBodypublic AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,@RequestParam String lxyf) throws Exception {}
使用 @RequestMapping注解,参数使用@RequestParam 进行接收
这里除了第一个文件参数,后面的两个都是额外传递的参数。
这样在后台中就能接收到参数了
ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收相关推荐
- 使用el upload标签上传文件的几种常见使用场景(前台+后台)
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录 一.总体代码 二.使用场景 1.添加 2.修改 3.单独上传到服务器 一.总体代码 1.前端控件 ...
- 使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件
最初使用该组件实现图片上传是没有问题的,前后端配合,最终实现想要的效果,组件使用过代码如下: 将文件拖到此处,或点击上传 现在改为使用该组件实现Excel文件上传,组件的使用几乎是不变的,代码如下: ...
- [原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
- Upload_上传_并传递额外参数
页面代码 <!--导入--><!--:data绑定传到后台的参数--><el-uploadstyle="display: inline-flex":s ...
- element-ui upload组件 上传文件类型限制
element-ui upload组件 上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
- 在jsp中使用smartupload组件上传文件- -
在jsp中使用smartupload组件上传文件- - jsp对上传文件的支持不象php中支持的那么好,直接做成了函数,也不象asp中要通过组件才能实现.jsp中可以通过javabean来实现.但是我 ...
- 在 node 中使用 koa-multer 库上传文件详解
本文主要介绍了上传单个文件.多个文件,文件数量大小限制.限制文件上传类型和对上传的图片进行不同大小的裁剪,阅读本篇文章需要具备一定的 node 和 koa 框架的基础知识以及 async await ...
- ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
- 修改form重定到iframe中,模拟异步上传文件的效果
2019独角兽企业重金招聘Python工程师标准>>> <%@ page contentType="text/html; charset=GBK" lang ...
最新文章
- Keil5报错:error: more than one instance overload function “xx“ has C linkage
- tomcat配置一个线程来调试ThreadLocal的代码问题
- C++之dynamic_cast、static_cast、const_cast、reinterpret_cast的用法和区别
- 网站能拿到其他网站的cookie_网站能给公司带来哪些好处?
- 树形结构递归初始化(父节点,统计字段等)
- 由浅至深 谈谈.NET混淆原理(三)-- 流程混淆
- java制作风车图像的main方法_创意图形的绘制 会转的风车
- 让一个从未接触过电脑的人测试浏览器
- 整理 深入理解RunLoop
- eclipse中文版官方下载
- 计算机专业英语词汇缩写,计算机专业英语词汇中英文对照其他缩写,外语网
- 灵异:各国家千年诅咒悬迷——不可思议
- Python Computer Vision Programming学习笔记(一)——Python以及各Package安装
- mqtt java教程_MQTT X 使用指南
- 牛客网练习赛24B 凤凰
- STM32使用HSE/HSI配置时钟(六)
- Python数据分析实战之一--某网站二手房交易信息(数据处理)
- 创作者基金新上线互动类型 NFTs,快来为你的体验添砖加瓦吧~
- 你是否愿意用华为鸿蒙系统,如果华为改用自研的“鸿蒙”系统,你是否愿意尝试?...
- 解决问题 Warning: Can‘t perform a React state update on an unmounted compo
热门文章
- Elasticsearch 100问(上)
- Kibana查询ES显示hits.total.value最大值10000的解决方法
- 架构师养成之道-02-jvm原理
- 学生用的笔记本电脑什么样的好_大学生用的学生党笔记本什么牌子好,听听学姐的...
- c++ 一个函数包括多个返回值判断_轻松玩转函数式编程
- python docker自动化_自动化 – 自动创建docker容器并启动python脚本
- c#控制台应用程序,如何实现隐藏DOS窗口
- 小甲鱼python课后题答案_小甲鱼python视频教程下载|小甲鱼零基础学python视频教程附习题答案_ - 极光下载站...
- 减少静态链接库的体积
- map for循环_如何用Map、Filter和Reduce替换Python For循环?