SpringBoot+Vue实现简单的文件上传（Excel篇）

SpringBoot+Vue实现简单的文件上传

1 环境 SpringBoot 3.2.1，Vue 2，ElementUI

2 页面

3 效果：只能上传xls文件且大小限制为2M，选择文件后自动上传。

4 前端代码

  

    
      
      
将文件拖到此处，或点击上传
      
 只能上传 xls 文件，且不超过2M
    
  


// import axios from "axios";
export default {
  name: 'App',
  data() {
    const data = [];
    return {
      filterText: '',
      data: JSON.parse(JSON.stringify(data)),
      copyData: [],
      nodeForm: {},
      formShow: false,
      checkNode: {},
      xml: '',
      typeList: [
        {
          value: 'root',
          label: '根节点'
        }, {
          value: 'node',
          label: '子节点'
        }
      ]
    }
  },
  watch: {},
  created() {
  },
  methods: {
    beforeUpload(file){
      const isText = file.type == "application/vnd.ms-excel"
      const isLt2M = file.size /1024 /1024  
5 后端代码
 
package org.wjg.onlinexml.service.impl;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import org.wjg.onlinexml.po.Result;
import org.wjg.onlinexml.service.FileService;
import java.io.IOException;
@Service("xls")
public class XLSServiceImpl implements FileService {
    @Override
    public Result upload(MultipartFile file) {
        if (file.isEmpty()) {
            return Result.builder().code(500).msg("上传失败！").build();
        }
        try (Workbook workbook = new HSSFWorkbook(file.getInputStream())) {
            //获取第一个sheet页
            Sheet sheet = workbook.getSheetAt(0);
            //遍历每行
            for (Row row : sheet) {
                //遍历每个单元格
                for (Cell cell : row) {
                    System.out.print(cell.getStringCellValue() + " ");
                }
                System.out.println();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.builder().code(200).msg("上传成功").build();
    }
}