SpringBoot+Vue实现简单的文件上传
1 环境 SpringBoot 3.2.1,Vue 2,ElementUI
2 页面
3 效果:只能上传xls文件且大小限制为2M,选择文件后自动上传。
4 前端代码
<template>
<div class="container">
<el-upload
class="upload-demo"
drag
action="/xml/fileUpload"
multiple
accept=".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 < 2
if(!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 {
@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();
}
}