SpringBoot+Vue实现简单的文件上传(Excel篇)

avatar
作者
筋斗云
阅读量: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();     } }   

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!