ElementUI文件上传和form表单一起提交

ElementUI文件上传和form表单一起提交

后台Controller

package com.ller;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 = ServletContext().getRealPath("/static/imgs");String filename = OriginalFilename();File destFile = new File(path, filename);ansferTo(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-uploadref="upload" # 插眼action="" # 原来的提交方法，这里我们把他覆盖了class="upload-demo":http-request="httpRequest" # 覆盖原本的提交方法，我们指定一个函数，在其中完成参数的提取，当然你也可以在其他的需求中对他进行直接提交:on-preview="handlePreview" # 当点击已上传的文件时执行的函数:multiple="false" # 是否允许多文件提交:limit="1" # 最大支持上传的文件数量:auto-upload="false" # 关闭自动提交:file-list="data.file" # 文件数据存储的位置,这里只是元数据，文件流只有真正提交的时候才会拥有>--><el-uploadref="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属性的filethis.data.file = param.file;},/* 提交修改*/onSubmit() {//注意执行submit方法后，他会触发upload组件中的 http-requestthis.$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>