2024.04.02

在这个任务中，你需要实现前端上传 Excel 文件，然后将文件传输到后端，后端再将 Excel 文件解析并将数据插入数据库。下面是一种可能的实现方法：

前端（Vue.js）：

1. 使用 <el-upload> 组件实现文件上传功能，并绑定一个上传文件的事件。
2. 通过 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）：

1. 创建一个 Spring Boot Controller 用于处理文件上传。
2. 在 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 文件，并将数据插入数据库中。