在若依项目中,对于商品模块,添加导入功能,通过规定格式的 Excel 表,将表中的数据导入数据库中并展示。
前言
项目中有导入商品的功能,通过导入 Excel 文档以方便添加数据。如果文档中的数据过大时可能时间会较长,这时需要使用一些简单高效的工具,以及考虑异步执行。
正文
EasyExcel
官方文档:我是链接
简单使用:我是链接。里面提供了一个 demo 的实例。
核心在于实现了 ReadListener 接口并实现两个方法。invoke 方法不断解析每一行数据,我们创建一个列表,每解析一行数据就添加到这个列表中,设置一个批量处理的数值,表示一次处理的量,同时在方法内判断列表的长度是否达到这个值,若达到则进行异步处理,同时清空列表。doAfterAllAnalysed 方法表示解析完所有的数据后做什么,首先处理列表中的数据,因为使用了异步处理,所以应该获取所有异步线程的状态,若有异常应该进行回滚。
接口
大致的思路是这样。我们先看接口
/**
* 导入商品管理列表
*/
@PreAuthorize("@ss.hasPermi('manage:sku:add')")
@Log(title = "商品管理", businessType = BusinessType.IMPORT)
@PostMapping("/import")
public AjaxResult excelImport(MultipartFile file) throws Exception {
importEasyExcel(file);
return AjaxResult.success();
}
接收 MultipartFile 类型的数据,前端使用的 el-Upload 组件,附上前端的代码
<el-upload
ref="uploadRef"
class="upload-demo"
:action="uploadExcelUrl"
:headers="headers"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:before-upload="handleBeforeUpload"
:limit="10"
:auto-upload="false"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
<el-button class="ml-3" type="success" @click="submitUpload">
上传
</el-button>
<template #tip>
<div class="el-upload__tip">
上传文件仅支持,xls/xlsx格式,文件大小不得超过1M
</div>
</template>
</el-upload>
<script>
/* 上传地址 */
const uploadExcelUrl = ref(import.meta.env.VITE_APP_BASE_API + "/manage/sku/import"); // 上传excel文件地址
/* 上传请求头 */
const headers = ref({ Authorization: "Bearer " + getToken() });
// 上传前loading加载
function handleBeforeUpload(file) {
let isExcel = false;
if (props.fileType.length) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
isExcel = props.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
}
if (!isExcel) {
proxy.$modal.msgError(
`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`
);
return false;
}
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt)