在利用upload上传时,难免会需要携带一些额外参数传入后端,例如列表某一列的上传需要传这一行的数据值,例如上传文件时,携带用户名和端口数据到后端进行逻辑操作
首先是前端代码:
<avue-crud
</template>
<template slot-scope="{type,size,row,index}" slot="menu">
<el-upload
class="upload-demo"
action="/test"
multiple
:data="uploadObjs"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button type="text" icon="el-icon-upload" @click="uploadDoc(row)">上传</el-button>
</el-upload>
</template>
</avue-crud>
在element-ui的官方文档上也有标注,利用:data进行传参
接下来是方法部分:
export default {
name:'1111',
components: { yamlDetailDialog },
data() {
return {
ipConfigInfo: {},
form: {},
query: {},
uploadObjs: {
ftpName:"",
ftpPort:""
},
option: {
height: 'auto',
calcHeight: 30,
menuWidth: 350,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: true,
copyBtn: true,
selection: true,
dialogClickModal: false,
column: [
{
label: "ftp用户名",
prop: "ftpName",
labelWidth: 110,
span: 12,
hide: true,
display: false
},
{
label: "ftp端口",
prop: "ftpPort",
labelWidth: 110,
span: 12,
hide: true,
display: false
},
]
},
data: []
};
},
methods: {
uploadDoc(row){
this.uploadObjs.ftpName = row.ftpName
this.uploadObjs.ftpPort = row.ftpPort
},
}
这块的逻辑是,:data内携带的自定义的全局变量uploadObjs,uploadObjs内有两个变量,分别是ftpUsername和ftpPassword,之后在el-upload的上传标签中调用el-button中定义的点击方法@click="uploadDoc(row)",传参为这行的值,之后可以在uploadDoc方法中,进行赋值,之后el-upload通过action的url地址向后端进行调用。
接下来是后端代码实现:
@PostMapping("/test")
public R uploadDoc(@RequestParam("file") MultipartFile file,@RequestParam("ftpName") String ftpUsername,@RequestParam("ftpPwd") String ftpPassword) {
return R.success("成功");
}
@RequestParam是Spring框架中用于绑定HTTP请求参数的注解。在处理HTTP请求时,可以使用@RequestParam将请求中的参数绑定到方法的参数上,将前端传来的值通过@RequestParam并根据名称获得相应值。