1、后端代码
第一步：导入POM依赖
<!--Excel导入导出依赖-->
<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version>
</dependency><!--hutool-all依赖-->
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version>
</dependency>
第二步：在UserMapper中添加批量导入的方法
// 批量导入用户信息void batchInsertUser(List<User> userList);
第三步：在UserMapper.xml中添加批量导入的SQL语句
<!--批量导入用户--><insert id="batchInsertUser" parameterType="java.util.List">INSERT INTO users(name,password,role,email,phone,create_time,update_time)VALUES<foreach collection="list" item="item" separator=",">(#{item.name},#{item.password},#{item.role},#{item.email},#{item.phone},#{item.createTime},#{item.updateTime})</foreach></insert>
第四步：在UserService中添加批量导入接口
/*** Excel导入用户信息* @param userList 用户信息列表* @return void */void importUser(List<User> userList);
第五步：在UserServiceImpl中实现批量导入接口
/*** 批量导入用户信息*/@Overridepublic void importUser(List<User> userList) {try {userMapper.batchInsertUser(userList);}catch (Exception e){e.printStackTrace();throw new CustomException("导入用户信息失败,请检查数据格式是否正确或用户名是否重复");}}
第六步：在FileController中添加导入接口
//导入UserService@Autowiredprivate UserService userService;/*** Excel导入* @param file Excel文件* @return 导入结果*/@PostMapping("/importUser")public JsonResult importExcel(@RequestParam("file") MultipartFile file) throws IOException {// 1. 使用输入流读取Excel文件InputStream inputStream = file.getInputStream();// 2. 读取流中的数据ExcelReader excelReader = ExcelUtil.getReader(inputStream);// 3. 将读取到的数据填充为List<User>List<User> userList = excelReader.readAll(User.class);// 4. 将userList保存到数据库userService.importUser(userList);// 5. 返回导入结果return JsonResult.success(userList);}
2、前端代码
第一步：<tmplate>部分
<el-uploadaction="http://localhost:8080/api/file/importUser":show-file-list="false":on-success="handleImport":on-error="handleImportError"><el-button type="success">批量导入</el-button>
</el-upload>
第二步：<script>部分
// 批量导入用户成功处理
const handleImport = (res) => {if (res.code === 200 || res.code === "200") {ElMessage.success('批量导入成功！')refreshAfterOperation()}
}// 批量导入失败处理
const handleImportError = (error) => {let errorMsg = '批量导入失败';try {// 1. 尝试解析错误信息中的JSON对象const errorData = JSON.parse(error.message);// 2. 检查是否存在message字段if (errorData && errorData.message) {errorMsg = errorData.message;}} catch (e) {// 3. 如果解析失败，使用原始错误信息console.warn("无法解析错误信息:", error.message);errorMsg = error.message;}// 4. 显示最终错误信息ElMessage.error(errorMsg);
}
