如何在前端上传Excel到后台，批量导入数据到Mysql数据库_怎么将前端表格中的东西与数据库-CSDN博客

本文链接：https://blog.csdn.net/qq_41973208/article/details/109356520

本文详细介绍了如何在前端使用HTML和JS实现Excel文件上传，后端通过Base64转换、MyBatis处理，并返回未导入成功的Excel数据供下载。同时提到了poi和Alibaba-excel库的选择及其优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在前端上传Excel数据批量导入数据库

需求：用户需要一个能够上传Excel表批量导入数据的功能。未成功导入的人员返回给前端一个Excel。个人觉得这样还不如直接通过连接工具手动将excel导入数据库。比如说这种：直接Navicat导入；因为之前自己也是这么搞得>>>》》传送门》》》

总之最后自己也做了，用的Poi ，由于之前项目中有用poi进行一些导出操作。所以就将就用了。就来记录一下吧！不过这种办法可能效率偏低！适合小数据量的Excel，比如千八百还行！当前仅限上传Excel文件，即 .xls 和 .xlsx。界面比较丑，勿喷；哈哈。效果如下：

注：那天问了好朋友，说 poi 这个东西比较out了，缺点比较多而且比较耗内存。推荐了个Alibaba-excel。感兴趣的同志可以研究一下。用了效果好记得回来告诉我一声。传送门>>>>>>Alibaba-Excel
好，接着看我的poi

一、效果图

在这里插入图片描述

二、代码实现

注：我是直接跟之前一样把Excel文件转成Base64格式字符串进行数据提交的。到后台再转回来！因为上传的Excel原文件要留存！所以到后台还需要把文件转回去进行存储！

1、前端代码

(1)、HTML代码

accept=“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel” 的意思是仅限上传excel文件，其他类型无法上传！

	<div class="form-group" id="excel-file" style="margin-top: 10px">
		<div class="col-sm-2 control-label" >上传表格(仅支持excel)</div>
		<div class="col-sm-10">
			<input id="person_list" type="file" class="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="pushExcel()"/>
		</div>
		<span style="color:red">*</span>
	</div>

(2)、JS代码

博主用的Vue进行的数据绑定，这里就简单把用到的几个参数列出来吧！

data:{
	importInfo：{
		//上传的Excel
		personExcel : "", 
		orgId : "" 
	}
}

将文件转为Base64格式存在personExcel里面！

pushExcel : function(){
	var file = document.getElementById("person_list").files[0];
	var r = new FileReader();
	r.readAsDataURL(file);
	if(null != file){
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function (e) {
		vm.importInfo.per