上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）

您所在的位置：网站首页 › 前端导出功能给了接口怎么做 › 上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）

上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）

#上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）| 来源: 网络整理| 查看: 265

vue.js前端，Java后端，如何导入excel文件，并且解析，本文给了前后端代码的实现，以及完美实践OK之后的分享。

前端主要用了element-ui的upload组件。

关于这个组件的官方文档很少：http://element-cn.eleme.io/#/zh-CN/component/upload ，也没仔细给个完整的demo，所以踩完坑写个完整的博客。

1.VUE前端demo 选取文件批量导入只能上传excel文件

关于每个字段的意思：

uploadUrl() 是后台接口（接受上传的文件并做后端的逻辑处理）

！！！注意：uploadUrl方法中，直接return的是你的后端URL接口，可以是相对路径，也可以是绝对路径

取相对路径的时候，会自动加上请求所在页面的前缀htpp://XXX作为请求URL的前缀，如果这样拼接的不对，自己就加上绝对路径：http://localhost:8080/XX 这样类似的URL

upLoadData是上传文件时要上传的额外参数，也可以不写，将参数直接带在URL请求中，见下面的demo

形似： url + "?businessName=" + this.businessName

uploadError是上传文件失败时的回掉函数，uploadSuccess是文件上传成功时的回掉函数，

beforeAvatarUpload是在上传文件之前调用的函数，可以在这里进行文件类型的判断，对上传格式及大小作限制

:auto-upload="false"是停止文件自动上传模式

name="excelFile"这里是将导入的EXCEL文件命名，并传给后端，所以后端接口的入参也要是这个名字，下面会贴代码。

:file-list="fileList" 显示已上传的文件列表，效果见下图3

选取文件

批量导入

是为了实现将选取文件和上传分开,效果如下：

关于上传多个文件

首先是设置是否可以同时选中多个文件上传，这个也是的属性，添加multiple即可。另外el-upload组件提供了:limit属性来设置最多可以上传的文件数量，超出此数量后选择的文件是不会被上传的。:on-exceed绑定的方法则是处理超出数量后的动作。（但一般单个文件批量导入够用了）代码如下：

上面每个方法对应的实现：

methods: { uploadUrl: function() { return ( "/fanxing/import/batchInsertShops" + "?businessName=" + this.businessName + "&businessStatus=" + this.businessStatus + "&businessType=" + this.businessType ); }, uploadSuccess(response, file, fileList) { if (response.status) { alert("文件导入成功"); } else { alert("文件导入失败"); } }, uploadFalse(response, file, fileList) { alert("文件上传失败！"); }, // 上传前对文件的大小的判断 beforeAvatarUpload(file) { const extension = file.name.split(".")[1] === "xls"; const extension2 = file.name.split(".")[1] === "xlsx"; const extension3 = file.name.split(".")[1] === "doc"; const extension4 = file.name.split(".")[1] === "docx"; const isLt2M = file.size / 1024 / 1024 < 10; if (!extension && !extension2 && !extension3 && !extension4) { alert("上传模板只能是 xls、xlsx、doc、docx 格式!"); } if (!isLt2M) { console.log("上传模板大小不能超过 10MB!"); } return extension || extension2 || extension3 || (extension4 && isLt2M); }, submitUpload() { if (this.businessType != null) { //触发组件的action this.$refs.upload.submit(); } if (this.businessType == null) { this.businessType = "businessType不能为空"; } }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { if (file.response.status) { alert("此文件导入成功"); } else { alert("此文件导入失败"); } } }

贴上效果图：

2.后端接口的实现 controller层的实现，主要看接口如何定义 @Controller @RequestMapping(value = "/fanxing/import") public class ImportController { @Resource ImportDataService importDataService; @RequestMapping(value = "/batchInsertShops", method = RequestMethod.POST) @ResponseBody public ResultData batchInsert(@RequestParam("excelFile") MultipartFile excelFile, @RequestParam(value = "businessName", required = true ) String businessName, @RequestParam(value = "businessStatus", required = true) Integer businessStatus, @RequestParam(value = "businessType", required = true) Integer businessType) throws IOException { String name = excelFile.getOriginalFilename(); if (name.length() < 6 || !name.substring(name.length() - 5).equals(".xlsx")) { return ResultDataBuilder.failWithNull("文件格式错误", ResultCode.FILE_FORMAT_ERROR.getCode()); } //TODO 业务逻辑，通过excelFile.getInputStream()，处理Excel文件 ExcelUtils.excelToShopIdList(excelFile.getInputStream()); } } 后端如何解析Excel文件 package com.dianping.fanxing.system.admin.web.util; import org.apache.commons.lang3.StringUtils; import org.apache.poi.ss.usermodel.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.io.InputStream; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class ExcelUtils { private static final Logger LOGGER = LoggerFactory.getLogger(ExcelUtils.class); public static List excelToShopIdList(InputStream inputStream) { List list = new ArrayList(); Workbook workbook = null; try { workbook = WorkbookFactory.create(inputStream); inputStream.close(); //工作表对象 Sheet sheet = workbook.getSheetAt(0); //总行数 int rowLength = sheet.getLastRowNum() + 1; //工作表的列 Row row = sheet.getRow(0); //总列数 int colLength = row.getLastCellNum(); //得到指定的单元格 Cell cell = row.getCell(0); for (int i = 1; i < rowLength; i++) { row = sheet.getRow(i); for (int j = 0; j < colLength; j++) { cell = row.getCell(j); if (cell != null) { cell.setCellType(Cell.CELL_TYPE_STRING); String data = cell.getStringCellValue(); data = data.trim(); if (StringUtils.isNumeric(data)) list.add(Integer.parseInt(data)); } } } } catch (Exception e) { LOGGER.error("parse excel file error :", e); } return shopIds; } } 3.汉字传输的乱码问题

关于前端输入汉字，传到后端的controller层乱码问题，确定前端页面设置的是UTF-8

原因：Spring MVC 是基于Servlet，在Http请求到达Servlet解析之前，GET过来的URL已经被Tomcat先做了一次URLDecode。

Tomcat对GET方式默认的URL解码结果是iso-8859-1而不是UTF-8！

解决办法1：

decodeFName = new String(fName.getBytes("iso-8859-1"),"utf-8");

解决方法2：

进入Tomcat的安装目录下，conf目录下找到server.xml文件，配置如下，主要添加 URIEncoding="UTF-8"就好了

建议第二种，一劳永逸

参考链接：https://segmentfault.com/a/1190000013796215#articleHeader5

主要遇到的问题：

1.前端组件使用问题

2.前端请求的相对路径，被upload组件自动补全了前缀，导致请求到不了后端

3.post请求的汉字到了后端的controller层乱码。

至此，前后端联调完毕，done。后端的去写前端真的心累，此文记录下这两天的摸索吧。

【本文地址】

上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）

上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）

今日新闻

推荐新闻