ElementUI中el-upload怎样上传⽂件并且传递额外参数给
Springboot后。。。
场景
需要将Excel中的数据导⼊到数据库中，就会⽤到⽂件上传的功能。
这⾥使⽤ElementUI的el-upload控件实现⽂件上传。
注：
实现
⾸先在页⾯上添加⼀个el-upload控件
<el-upload
ref="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>
vue element admin
<div class="el-upload__text">
将⽂件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
<el-link
type="info"
@click="downloadTemplate('lxszTemplate.xlsx')"
>下载模板</el-link>
</div>
<div class="el-upload__tip" 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: v.VUE_APP_BASE_API + "/kqgl/lxsz/importData",
},
其中设置上传的请求头时的getToken是获取令牌跳过登录验证的⽅法
它来⾃于下⾯的js
import Cookies from'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
ve(TokenKey)
}
然后设置上传地址中v.VUE_APP_BASE_API 是在全局的precess中获取在fig.js中配置的接⼝代码的地址
proxy: {
[v.VUE_APP_BASE_API]: {
target: `localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + v.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 });
},
在上传中时将此控件设置为禁⽤，上传成功后将此对话框关闭，将上传控件启⽤，清理选择的⽂件，提⽰导⼊结果，刷新数据列表。如果不加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")
@ResponseBody
public AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,@RequestParam String lxyf) throws Exception {    }
使⽤ @RequestMapping注解，参数使⽤@RequestParam 进⾏接收
这⾥除了第⼀个⽂件参数，后⾯的两个都是额外传递的参数。
这样在后台中就能接收到参数了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。