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

后台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>