vue+springboot+element从mysql拿到文件和表单数据并显示

首先，你需要创建一个Spring Boot的后端应用程序，包括以下依赖项：

- Spring Boot Web
- Spring Boot Data JPA
- MySQL Driver

接下来，你需要创建一个包含文件和表单数据的实体类，并使用JPA注解将其映射到MySQL数据库。例如：

@Entity
@Table(name = "file_data")
public class FileData {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String fileName;

    @Lob
    @Column(nullable = false)
    private byte[] fileContent;

    // getters and setters
}

然后，你需要创建一个包含文件上传和表单数据提交的Vue.js前端应用程序。你可以使用Element UI来创建上传组件和表单组件。例如：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="文件">
      <el-upload
        class="upload-demo"
        action="http://localhost:8080/upload"
        :on-success="handleUploadSuccess"
        :file-list="fileList"
        multiple>
        <el-button size="small" type="primary">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">仅支持xlsx文件</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      fileList: []
    }
  },
  methods: {
    handleUploadSuccess(response, file) {
      this.fileList.push(file)
    },
    handleSubmit() {
      const formData = new FormData()

      formData.append('name', this.form.name)
      formData.append('age', this.form.age)
      formData.append('file', this.fileList[0].raw)

      axios.post('http://localhost:8080/submit', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

最后，你需要在Spring Boot应用程序中编写上传和表单提交的控制器。例如：

@RestController
public class FileController {
    @Autowired
    private FileDataRepository fileDataRepository;

    @PostMapping("/upload")
    public Long handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
        FileData fileData = new FileData();
        fileData.setFileName(file.getOriginalFilename());
        fileData.setFileContent(file.getBytes());
        fileDataRepository.save(fileData);

        return fileData.getId();
    }

    @PostMapping("/submit")
    public String handleSubmit(@RequestParam("name") String name,
                                @RequestParam("age") Integer age,
                                @RequestParam("file") MultipartFile file) throws IOException {
        FileData fileData = new FileData();
        fileData.setFileName(file.getOriginalFilename());
        fileData.setFileContent(file.getBytes());
        fileDataRepository.save(fileData);

        return "提交成功";
    }
}

在这个例子中，`FileData`实体类包含了文件名和文件内容，通过JPA注解映射到MySQL数据库。在Vue.js前端应用程序中，你可以使用Element UI创建一个上传组件和表单组件，将表单数据和文件上传到后端应用程序。在Spring Boot后端应用程序中，你可以编写上传和表单提交的控制器，将文件保存到MySQL数据库，并返回提交成功的信息。