这个任务中，你需要实现前端上传 Excel 文件，然后将文件传输到后端，后端再将 Excel 文件解析并将数据插入数据库。下面是一种可能的实现方法：
前端（Vue.js）：
- 使用
<el-upload>组件实现文件上传功能，并绑定一个上传文件的事件。 - 通过 Axios 或其他方式将上传的 Excel 文件发送到后端。
| <template> | |
| <el-upload | |
| class="upload-demo" | |
| drag | |
| action="/upload" | |
| multiple | |
| :before-upload="handleBeforeUpload" | |
| :on-success="handleUploadSuccess" | |
| > | |
| <i class="el-icon-upload"></i> | |
| <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> | |
| <div class="el-upload__tip" slot="tip">只能上传excel文件</div> | |
| </el-upload> | |
| </template> | |
| <script> | |
| import axios from 'axios'; | |
| export default { | |
| methods: { | |
| handleBeforeUpload(file) { | |
| const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; | |
| if (!isExcel) { | |
| this.$message.error('只能上传excel文件'); | |
| } | |
| return isExcel; | |
| }, | |
| handleUploadSuccess(response, file, fileList) { | |
| this.$message.success('上传成功'); | |
| } | |
| } | |
| } | |
| </script> |
后端（Java + Spring Boot + MyBatis）：
- 创建一个 Spring Boot Controller 用于处理文件上传。
- 在 Controller 中实现文件接收和解析的逻辑，然后将数据插入数据库。
| import org.springframework.web.bind.annotation.*; | |
| import org.springframework.web.multipart.MultipartFile; | |
| import java.io.*; | |
| @RestController | |
| public class FileUploadController { | |
| @PostMapping("/upload") | |
| public String handleFileUpload(@RequestParam("file") MultipartFile file) { | |
| if (!file.isEmpty()) { | |
| try { | |
| byte[] bytes = file.getBytes(); | |
| // 保存文件到服务器或者直接处理文件 | |
| // 这里可以调用处理Excel文件的方法，将数据插入数据库 | |
| return "File uploaded successfully"; | |
| } catch (IOException e) { | |
| e.printStackTrace(); | |
| return "File upload failed"; | |
| } | |
| } else { | |
| return "No file uploaded"; | |
| } | |
| } | |
| } |
在上述示例中，前端使用 Element UI 的 <el-upload> 组件来实现文件上传功能，后端使用 Spring Boot 实现文件上传的接口。在后端 Controller 中，你可以使用 Apache POI 或其他库来解析上传的 Excel 文件，并将数据插入数据库中。