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中实现批量导入接口
/**
* 批量导入用户信息
*/
@Override
public void importUser(List<User> userList) {
try {
userMapper.batchInsertUser(userList);
}catch (Exception e){
e.printStackTrace();
throw new CustomException("导入用户信息失败,请检查数据格式是否正确或用户名是否重复");
}
}
第六步:在FileController中添加导入接口
//导入UserService
@Autowired
private 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-upload
action="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);
}