ElementUI文件上传和form表单一起提交
后台Controller。前台upload.vue。
·
后台Controller
package com.fengqing.bbs.controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
@RestController
@RequestMapping("/file")
@CrossOrigin
public class UploadController {
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file,
@RequestParam("name") String name,
@RequestParam("age") int age,
HttpServletRequest request) throws Exception{
String path = request.getServletContext().getRealPath("/static/imgs");
String filename = file.getOriginalFilename();
File destFile = new File(path, filename);
file.transferTo(destFile);
System.out.println(name);
System.out.println(age);
return "success";
}
}
前台upload.vue
<template>
<div>
<el-form ref="form" :model="data" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="data.name" type="text" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="data.age" type="text" placeholder="请输入年龄" />
</el-form-item>
<el-form-item>
<!--<el-upload
ref="upload" # 插眼
action="" # 原来的提交方法,这里我们把他覆盖了
class="upload-demo"
:http-request="httpRequest" # 覆盖原本的提交方法,我们指定一个函数,在其中完成参数的提取,当然你也可以在其他的需求中对他进行直接提交
:on-preview="handlePreview" # 当点击已上传的文件时执行的函数
:multiple="false" # 是否允许多文件提交
:limit="1" # 最大支持上传的文件数量
:auto-upload="false" # 关闭自动提交
:file-list="data.file" # 文件数据存储的位置,这里只是元数据,文件流只有真正提交的时候才会拥有
>-->
<el-upload
ref="upload"
action=""
class="upload-demo"
:http-request="httpRequest"
:multiple="false"
:limit="1"
:auto-upload="false"
:file-list="data.file">
<el-button size="small" type="primary">选择头像</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "upload",
data(){
return {
data: {
name: "tom",
age: 18
}
}
},
methods: {
httpRequest(param){
//把上传的文件赋值给data属性的file
this.data.file = param.file;
},
/* 提交修改*/
onSubmit() {
//注意执行submit方法后,他会触发upload组件中的 http-request
this.$refs.upload.submit()
// 新建form表单
const formData = new FormData();
formData.append("name", this.data.name);
formData.append("age", this.data.age);
formData.append("file", this.data.file);
let config = {
header: {
"Content-Type": "multipart/form-data"
}
}
this.axios.post("/file/upload", formData, config)
.then(response => {
alert(response.data);
})
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)