element ui 同时提交表单数据和多张图片

一、vue页面

<template>
  <div>
    <h1>统计</h1>

    <!--原生表单提交-->
    <form method="post" action="http://localhost:8082/file/up" enctype="multipart/form-data">
      文件 ： <input type="file" name="file">
      <br />
      文件 ： <input type="file" name="file">
      <br />
      姓名：<input type="text" name="name" />
      <br />
      年龄：<input type="number" name="age" />
      <input type="submit" value="上传">
    </form>
    <br />
    <br />

    <!--element ui表单提交-->
    <el-form :model="user" :rules="rules" ref="user" label-width="100px" label-position="right">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="user.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <el-input type="number" v-model="user.age"></el-input>
      </el-form-item>
      <el-form-item>

        <el-upload class="upload-demo" action="" list-type="picture-card" ref="upload" :http-request="httpRequest"
          multiple :file-list="fileList" :auto-upload="false">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="rest()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          name: '',
          age: 0
        },
        rules: {
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          age: [{
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
          }]
        },
        fileList: [],
        formDate: new FormData(),
      }
    },
    methods: {
      submit() { //提交
        //上传类型
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        //表单校验
        this.$refs['user'].validate((valid) => {
          if (valid) {
            this.formDate.append('name', this.user.name);
            this.formDate.append('age', this.user.age);
            //获取图片
            this.$refs.upload.submit();
            //上传
            this.axios.post('http://localhost:8082/file/up', this.formDate, config).then((res) => {
              console.info('结果', res);
              this.formDate = new FormData();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      rest() { //重置
        this.$refs['user'].resetFields();
      },
      httpRequest(param) { //this.$refs.upload.submit()执行后会调用，多个图片会调用多次
        this.formDate.append('file', param.file);
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

二、后端代码

package com.example.demo.controller;

import com.example.demo.pojo.User;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

/**
 * @Description: 文件上传
 * @Auther: cym
 * @Date: 2022/4/16
 * @Version: 1.0
 */
@CrossOrigin
@RequestMapping("file")
@RestController
public class FileUpController {

    @PostMapping("up")
    public void fileUp(@RequestParam(value = "file", required = false) MultipartFile[] files, User user) {
        System.out.println(user);
        for (MultipartFile file : files) {
            File f = new File("C:\Users\cym\Desktop\图片3.jpeg");
            try {
                file.transferTo(f);
            } catch (IOException e) {
                e.printStackTrace();
            }
            System.out.println("文件名称" + file.getOriginalFilename());
        }
    }
}

package com.example.demo.pojo;

/**
 * @Description: 用户
 * @Auther: cym
 * @Date: 2022/4/16
 * @Version: 1.0
 */
public class User {
    private String name;
    private Integer age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

三、页面效果

后台打印