阅读量:3
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(); } }