在之前的文章中演示了如何實現數據的導出，本文接着演示如何實現數據導入。對前端而言，數據導入就是文件上傳，對后端這邊則是獲取上傳的文件進行解析，並把解析出來的數據保存到數據庫中。
二、從 excel 文件導入數據
1，添加依賴
編輯項目的 pom.xml 文件，添加 poi 相關依賴：
|
1
2
3
4
5
|
<
dependency
>
<
groupId
>org.apache.poi</
groupId
>
<
artifactId
>poi</
artifactId
>
<
version
>3.17</
version
>
</
dependency
>
|
2，創建數據模型
這里我們定義一個 User 模型對象，后面將會把解析出來的數據轉成這個數據模型集合。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
@ToString
public
class
User {
private
int
id;
private
String name;
private
String gender;
private
Date birthday;
private
String workID;
}
|
3，創建導入工具類
為方便使用，這里封裝一個用於導入數據的工具類。里面主要工作是獲取上傳文件的流，然后進行解析，最終將得到的數據集合返回。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
public
class
PoiUtils {
// 從excel文件中導入數據
public
static
List<User> importUser2List(MultipartFile file) {
List<User> users =
new
ArrayList<>();
try
{
// 根據上傳文件的流獲取一個 HSSFWorkbook 對象
HSSFWorkbook workbook =
new
HSSFWorkbook(
new
POIFSFileSystem(file.getInputStream()));
// 獲取 workbook 中表單的個數
int
numberOfSheets = workbook.getNumberOfSheets();
// 遍歷表單
for
(
int
i =
0
; i < numberOfSheets; i++) {
HSSFSheet sheet = workbook.getSheetAt(i);
// 對於每個表單，先獲取行數
int
physicalNumberOfRows = sheet.getPhysicalNumberOfRows();
User user;
for
(
int
j =
0
; j < physicalNumberOfRows; j++) {
if
(j ==
0
) {
continue
;
//標題行跳過
}
HSSFRow row = sheet.getRow(j);
if
(row ==
null
) {
continue
;
//沒數據跳過
}
// 如果該行數據正常，則獲取改行的單元格個數進行遍歷
int
physicalNumberOfCells = row.getPhysicalNumberOfCells();
user =
new
User();
for
(
int
k =
0
; k < physicalNumberOfCells; k++) {
HSSFCell cell = row.getCell(k);
switch
(cell.getCellTypeEnum()) {
// 處理格式為普通文本的單元格數據
case
STRING: {
String cellValue = cell.getStringCellValue();
if
(cellValue ==
null
) {
cellValue =
""
;
}
switch
(k) {
case
1
:
user.setName(cellValue);
break
;
case
2
:
user.setWorkID(cellValue);
break
;
case
3
:
user.setGender(cellValue);
break
;
}
}
break
;
// 處理其他格式的單元格數據
default
: {
switch
(k) {
case
0
:
user.setId((
int
)cell.getNumericCellValue());
break
;
case
4
:
user.setBirthday(cell.getDateCellValue());
break
;
}
}
break
;
}
}
users.add(user);
}
}
}
catch
(IOException e) {
e.printStackTrace();
}
// 將遍歷得到的數據集合返回
return
users;
}
}
|
4，數據導入接口
我們創建一個 Controller 調用這個工具類來獲取 excel 文件中的人員數據：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@RestController
public
class
HelloController {
@PostMapping
(
"/importUser"
)
public
String importUser(MultipartFile file) {
List<User> users = PoiUtils.importUser2List(file);
System.out.println(
"--- 共有"
+ users.size() +
"條數據 ---"
);
for
(User user: users) {
System.out.println(user);
}
return
"導出成功！"
;
}
}
|
5，前端實現
前端主要是一個 Excel 表格的上傳，這里直接采用 Element 的文件上傳控件，具體代碼如下：
（1）el-upload 組件屬性介紹：
- accept：表示接收的上傳文件類型
- action：表示上傳接口
- :on-success：表示上傳成功時的回調
- :on-error：表示上傳失敗時的回調
- :disabled：表示當 fileUploadBtnText 屬性的值為“正在導入”時禁用上傳控件
- :before-upload：表示文件上傳前的回調
（2）el-button 組件屬性介紹：
- :loading="fileUploadBtnText=='正在導入'" 表示當 fileUploadBtnText 文本為“正在導入”時，顯示一個 Loading 加載
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<
template
>
<
div
>
<
el-upload
:show-file-list
=
"false"
accept
=
"application/vnd.ms-excel"
action
=
"/importUser"
:on-success
=
"fileUploadSuccess"
:on-error
=
"fileUploadError"
:disabled
=
"fileUploadBtnText=='正在導入'"
:before-upload
=
"beforeFileUpload"
style
=
"display: inline"
>
<
el-button
size
=
"mini"
type
=
"success"
:loading
=
"fileUploadBtnText=='正在導入'"
>
<
i
class
=
"fa fa-lg fa-level-up"
style
=
"margin-right: 5px"
></
i
>{{fileUploadBtnText}}
</
el-button
>
</
el-upload
>
</
div
>
</
template
>
<
script
>
export default{
data(){
return {
fileUploadBtnText: '導入數據', // 按鈕文字
}
},
methods: {
// 文件上傳成功的回調
fileUploadSuccess(response, file, fileList) {
if (response) {
this.$message({type: 'success', message: response});
}
this.fileUploadBtnText = '導入數據';
},
// 文件上傳失敗的回調
fileUploadError(err, file, fileList) {
this.$message({type: 'error', message: "導入失敗!"});
this.fileUploadBtnText = '導入數據';
},
// 文件上傳前的回調
beforeFileUpload(file) {
this.fileUploadBtnText = '正在導入';
}
}
}
</
script
>
<
style
>
</
style
>
|
6，運行測試
（1）准備一個用於上傳的 excel 文件，內容如下：
（2）點擊“導入數據”按鈕選擇 excel 文件后會自動上傳：
（3）后端接收到文件后解析並打印出相關信息：
（4）同時前端也會顯示成功信息：
原文出自：www.hangge.com 轉載請保留原文鏈接：https://www.hangge.com/blog/cache/detail_2722.html