批量添加:vue+easyexcel 上传excel文件解析为Java对象并保存到数据库

对于像数据库中批量添加数据,我们一般会选择通过Excel文件先按照固定的格式将数据保存,然后再通过系统上传进而保存到数据库中。

阿里的excel解析工具EasyExcel和Apach的POI都能进行Excel文件的解析,但是EasyExcel操作起来要相对更简单一些,这里我们选用VUE+EasyExcel的方式来进行数据的上传和解析。

POI解析Excel文件:https://blog.csdn.net/weixin_45890113/article/details/115742939

前端:上传Excel文件,在前端进行校验,只能上传excel文件

<div>
  批量上传员工信息:
  <label for="file-upload" class="button">选择文件</label>
  <input
     type="file"
     id="file-upload"
     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
     @change="handleFileUpload"
     style="display: none"
   />
</div>

......

methods: {
    handleFileUpload (event) {
      const file = event.target.files[0];
      if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' &&
          file.type !== 'application/vnd.ms-excel') {
        alert('只能上传 Excel 文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', file);
      fetch(this.'上传文件的URL地址', {
        method: 'POST',
        body: formData
      })
        .then(response => {
          insertBatch().then(rst => {
            let { code, page, msg } = rst.data;
            if (code === '0000') {
              this.loading = false;
              this.data = rst.data.data;
              this.page.total = page.sum;
              this.page.current = page.currentPage;
              this.findByPage(this.page);
              this.page.currentSize = this.$isEmpty(this.data) ? 0 : this.data.length;
            } else {
              this.$Message.error(msg);
            }
          });
        })
        .catch(error => {
          console.error(error);
        });
    },
......
}

......
<style>
  .button {
    display: inline-block;
    background-color: #42b983;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>

后端:接收到前端传输的文件后,将其读取到内存中,再通过EasyExcel对其进行解析

Controller层代码

    @PostMapping("/uploadFile")
    public void uploadFile(MultipartFile file) {
        csEquipmentWbbList = csEquipmentWbbService.uploadFile(file) ;
    }

Service层代码

// 接口
List<CsEquipmentWbb> uploadFile(MultipartFile file);
-------------------------------------------------------------------------------------
// 实现
@Override
public List<CsEquipmentWbb> uploadFile(MultipartFile file) {
    EquipmentDeviceListener listener = new EquipmentDeviceListener();
    try {
        InputStream inputStream = file.getInputStream();
        EasyExcel.read(inputStream , EquipmentDevice.class , listener).sheet().doRead();
        List<CsEquipmentWbb> csEquipmentWbbList = new ArrayList<>() ;
        List<EquipmentDevice> equipmentDeviceList = listener.getEquipmentDeviceList() ;
        for (EquipmentDevice equipmentDevice : equipmentDeviceList) {
            CsEquipmentWbb csEquipmentWbb = beanCopyUtils.convertTo(equipmentDevice, CsEquipmentWbb.class);
            csEquipmentWbbList.add(csEquipmentWbb) ;
        }
        return csEquipmentWbbList ;

    } catch (Exception e) {
        log.error(e.getMessage() , e);
    }
    return null;
}

这里我们需要去创建一个listener监听器,通过继承AnalysisEventListener类并重写其中的方法来达到对Excel文件的解析。

AnalysisEventListener类的介绍:

AnalysisEventListener 是 EasyExcel 中提供的一种事件监听器,用于处理 Excel 文件的读取和写入等操作。通常情况下,我们可以通过继承 AnalysisEventListener 并重写其中的回调方法来实现对 Excel 文件的读取和写入操作。在读取 Excel 文件时,我们可以使用 AnalysisEventListener 的 invoke() 方法来获取每行数据并进行处理。同时,doAfterAllAnalysed() 方法会在 Excel 文件解析完成后被调用,我们可以在该方法中对读取到的数据进行统一处理或保存等操作。

对于EquipmentDevice类,我们需要根据自身情况去具体的设置,如果说excel文件中的数据就是刚好能符合后端接收数据的对象的属性,那么我们无需再定义一个类去接收。如果excel文件中只是包含了个别字段,那么我们最好再去定义一个新的类先将数据接收并保存,再将数据copy给指定的类的集合。

public class EquipmentDeviceListener extends AnalysisEventListener<EquipmentDevice> {

    List<EquipmentDevice> equipmentDeviceList = new ArrayList<>() ;

    public List<EquipmentDevice> getEquipmentDeviceList() {
        return  equipmentDeviceList;
    }

    @Override
    public void invoke(EquipmentDevice equipmentDevice, AnalysisContext analysisContext) {
        equipmentDeviceList.add(equipmentDevice) ;
    }

    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
        // 我们解析得到的数据也可以直接在该方法中进行进一步的处理,我是写到了service层去处理的
    }
}

通过上面的代码我们就能实现前端传输Excel文件到后端进行解析的操作了,最终得到一个集合,再进一步对集合中数据进行相应的操作即可

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值