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

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


相关推荐

  1. SpringBoot+Vue实现简单文件(策略模式)

    2024-07-15 07:48:04       24 阅读
  2. ByteToMessageDecoder&简单实现文件

    2024-07-15 07:48:04       40 阅读
  3. django关于文件分块简单实现(template+view)

    2024-07-15 07:48:04       40 阅读
  4. 使用vueelement组件excel文件

    2024-07-15 07:48:04       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 07:48:04       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 07:48:04       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 07:48:04       57 阅读
  4. Python语言-面向对象

    2024-07-15 07:48:04       68 阅读

热门阅读

  1. uniapp 初始学习1

    2024-07-15 07:48:04       31 阅读
  2. 在 YAML 中的变量(使用 &和 * 定义及引用变量)

    2024-07-15 07:48:04       24 阅读
  3. Julia 交互式命令

    2024-07-15 07:48:04       25 阅读
  4. uniapp颜色选择器

    2024-07-15 07:48:04       22 阅读
  5. 什么是DDoS攻击

    2024-07-15 07:48:04       25 阅读
  6. [NeetCode 150] Word Ladder

    2024-07-15 07:48:04       23 阅读
  7. nginx+lua 实现URL重定向(根据传入的参数条件)

    2024-07-15 07:48:04       20 阅读
  8. Vue2-案例tab切换栏高亮

    2024-07-15 07:48:04       25 阅读
  9. 项目管理·沟通管理

    2024-07-15 07:48:04       26 阅读
  10. CentOS Stream 卸载 Podman 并安装 Docker 的方法

    2024-07-15 07:48:04       21 阅读