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

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

1 环境 SpringBoot 3.2.1，Vue 2，ElementUI
2 页面
在这里插入图片描述

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

<template><div class="container"><el-uploadclass="upload-demo"dragaction="/xml/fileUpload"multipleaccept=".xls":before-upload="beforeUpload"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip"><slot name="tip" > 只能上传 xls 文件，且不超过2M</slot></div></el-upload></div>
</template><script>
// 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 < 2if(!isText){this.$message.error("只能上传xls文件！")return false;}if(!isLt2M){this.$message.error("文件大小超过限制！")return false;}return true;}}
}
</script><style>
.container {display: flex;
}
</style>

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 {@Overridepublic 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();}
}