vue+springboot+element怎么回显MySQL中的文件和表单数据的所有代码怎么写

这个问题比较复杂，需要根据你具体的需求和实现方式来编写代码。这里提供一个基本的思路和代码框架，你可以根据自己的情况进行修改和完善。

1. 在前端页面中添加一个表单和一个文件上传组件，用户可以填写表单信息和上传文件。

2. 在后端Spring Boot应用中添加一个API接口，接收前端发送的表单数据和文件，并将其保存到MySQL数据库中。可以使用Spring Boot提供的JPA或MyBatis等持久化框架来实现数据存储。

3. 当用户需要查看已上传的文件和表单数据时，在前端页面中发送一个请求到后端API接口，获取MySQL中的数据。

4. 后端API接口可以使用Spring Boot提供的RestController注解来定义，具体代码如下：

@RestController
@RequestMapping("/api")
public class MyController {

    @Autowired
    private MyService myService;

    // 上传文件和表单数据
    @PostMapping("/upload")
    public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("data") String data) {
        // TODO: 将文件和数据保存到MySQL中
        return ResponseEntity.ok().build();
    }

    // 获取所有已上传的文件和表单数据
    @GetMapping("/data")
    public ResponseEntity<List<MyData>> getAllData() {
        List<MyData> dataList = myService.getAllData();
        return ResponseEntity.ok(dataList);
    }
}

5. 前端页面可以使用Vue.js和Element UI等框架来实现，具体代码如下：

<template>
  <div>
    <!-- 表单 -->
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="age"></el-input>
      </el-form-item>
      <el-form-item label="文件">
        <el-upload :action="uploadUrl" name="file" :headers="headers" :on-success="handleFileUploadSuccess">
          <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 数据列表 -->
    <el-table :data="dataList">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="文件">
        <template slot-scope="scope">
          <a :href="getFileUrl(scope.row.id)">{{ scope.row.fileName }}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      age: '',
      uploadUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      dataList: []
    }
  },
  methods: {
    handleFileUploadSuccess(response) {
      // TODO: 处理文件上传成功后的逻辑
    },
    submitForm() {
      // TODO: 发送表单数据和文件到后端API接口
    },
    getAllData() {
      axios.get('/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getFileUrl(id) {
      // TODO: 根据文件ID生成文件下载链接
    }
  },
  mounted() {
    this.getAllData();
  }
}
</script>

这只是一个简单的代码框架，具体实现还需要根据实际情况来进行修改和完善。