vue+spring boot项目实现EasyExcel批量导入

本文介绍了如何使用EasyExcel框架在Vue和Spring Boot项目中实现Excel文件的批量导入。EasyExcel相比Poi降低了内存消耗,适合处理大量数据。在Vue前端,利用Element UI的Upload组件完成文件上传。在Spring Boot后端,配置文件上传限制,创建controller接口,定义实体类并使用@ExcelProperty和@ExcelIgnore注解,通过监听器将数据逐条读取并存入数据库。
摘要由CSDN通过智能技术生成

一、先来了解一下EasyExcel:
1、Poi和EasyExcel框架都能生成excel,但是poi框架非常耗内存,因此推荐使用easyexcel生成excel。EasyExcel是阿里巴巴开源的一个excel处理框架,easyexcel能够减少内存的消耗的主要原因是,在解析Excel时没有将文件数据一次性全部加载到内存中,而是从磁盘上一行行读取数据,逐个解析。
2、EasyExcel导入使用的场景:减轻录入工作量

二、vue前端代码实现
调用vue element-ui官网(https://element.eleme.io/#/zh-CN/component/upload)中的upload上传组件:
在这里插入图片描述
以批量导入通知信息为例,在Notice.vue中:

<template>
  <div>
      <el-upload
        class="upload-demo"
        drag
        action=""
        :http-request="upload"
        :before-upload="beforeUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件,且不超过100M</div>
      </el-upload>
      <br/>
    </div>
<template>

调用了文件上传导入前和导入两个方法:

<script>
  export default {
      methods: {
          //导入
        beforeUpload: function(file) {
          let extension = file.name.substring(file.name.lastIndexOf('.')+1);
          let size = file.size / 1024 / 1024;
          if(extension !== 'xlsx') {
            this.$message.warning('只能上传后缀是.xlsx的文件');
          }
          if(size > 10) {
            this.$message.warning('文件大小不得超过10M');
          }
        },
        upload: function(param) {
          let formData = new FormData()
          formData.append('file', param.file)
          this.$a
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值