springboot+vue项目，实现一个前端上传excel文件，后端接收此excel文件并解析为list集合，给出前后端实现逻辑和详细代码

前端实现逻辑：

1. 在Vue组件中添加一个input标签，设置type属性为file，用于选择文件上传。

2. 监听input标签的change事件，获取选择的文件对象。

3. 创建FormData对象，将文件对象添加到FormData中。

4. 使用axios或者其他网络请求库，发送POST请求，将FormData对象作为请求体发送到后端。

5. 接收后端返回的数据，进行处理展示。

前端代码示例：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      fileList: [] // 用于存储解析后的文件数据
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      this.file = file
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)
      axios.post('/api/upload', formData).then(res => {
        this.fileList = res.data
      })
    }
  }
}
</script>

后端实现逻辑：

1. 创建一个Controller，定义一个接口用于接收上传的文件，并返回解析后的数据。

2. 使用注解@RequestBody获取请求体中的文件数据，并将其转换为MultipartFile对象。

3. 使用POI或其他Excel解析工具，将MultipartFile对象解析为List集合。

4. 将解析后的List集合返回给前端。

后端代码示例：

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

  @PostMapping("/upload")
  public List<ExcelData> uploadFile(@RequestBody MultipartFile file) {
    List<ExcelData> dataList = new ArrayList<>();
    try {
      InputStream inputStream = file.getInputStream();
      Workbook workbook = WorkbookFactory.create(inputStream);
      Sheet sheet = workbook.getSheetAt(0);
      for (int i = 1; i <= sheet.getLastRowNum(); i++) {
        Row row = sheet.getRow(i);
        ExcelData data = new ExcelData();
        data.setCol1(row.getCell(0).getStringCellValue());
        data.setCol2(row.getCell(1).getStringCellValue());
        data.setCol3(row.getCell(2).getStringCellValue());
        dataList.add(data);
      }
      workbook.close();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return dataList;
  }
}

其中ExcelData为自定义类，用于存储解析后的Excel数据。