vue+springboot+element上传表单数据和文件同时上传

在端，可以使用 Element UI 的 Upload 组件来上传文件，同时将表单数据也一并提交到后端。具体代码如下：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="头像">
      <el-upload
        class="avatar-uploader"
        action="/api/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        avatar: ''
      },
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.avatar = res.url
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      // 限制上传图片的大小和格式
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const formData = new FormData()
          formData.append('name', this.form.name)
          formData.append('avatar', this.form.avatar)
          // 将表单数据和文件一起提交到后端
          this.$http.post('/api/user', formData).then(res => {
            this.$message.success('提交成功')
          }).catch(error => {
            this.$message.error('提交失败')
          })
        } else {
          this.$message.error('表单验证失败')
          return false
        }
      })
    }
  }
}
</script>

在后端，使用 Spring Boot 的 MultipartFile 类型来接收上传的文件，并在 Controller 中处理表单数据和文件上传的逻辑。具体代码如下：

@RestController
@RequestMapping("/api")
public class UserController {
    
    @PostMapping("/user")
    public ResponseEntity<?> createUser(@RequestParam("name") String name,
                                         @RequestParam("avatar") MultipartFile avatar) {
        // 处理表单数据和文件上传的逻辑
        // ...
        return ResponseEntity.ok().body("创建用户成功");
    }
    
}

需要注意的是，由于使用了 FormData 对象来提交表单数据和文件，因此需要在前端使用 axios 或者其他 HTTP 请求库来发送 POST 请求。在上面的代码中，我使用了 Vue.js 的官方插件 vue-resource 来发送 POST 请求。如果您使用的是 axios，则可以将代码修改为：

import axios from 'axios'

submitForm() {
  this.$refs.form.validate(valid => {
    if (valid) {
      const formData = new FormData()
      formData.append('name', this.form.name)
      formData.append('avatar', this.form.avatar)
      // 将表单数据和文件一起提交到后端
      axios.post('/api/user', formData).then(res => {
        this.$message.success('提交成功')
      }).catch(error => {
        this.$message.error('提交失败')
      })
    } else {
      this.$message.error('表单验证失败')
      return false
    }
  })
}