2020-08-19

最新推荐文章于 2024-05-03 16:12:22 发布

元善

最新推荐文章于 2024-05-03 16:12:22 发布

阅读量145

点赞数

分类专栏： java学习笔记文章标签： java excel spring boot

本文链接：https://blog.csdn.net/cs___sc/article/details/108100233

版权

java学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

#需求
![Excel样例.png](https://upload-images.jianshu.io/upload_images/12383780-3009adfe3f18b890.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Excel文件数据导入，即将表格中的数据存储到数据库中，我这里使用了阿里的 easyExcel 实现整个过程，使用Maven工具
#思路
1.文件上传，将Excel表格上传
2.读取Excel数据
3.数据存入数据库中
#操作
1.导入依赖
```

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.6</version>
</dependency>
```
2.配置文件大小
```
spring.servlet.multipart.max-file-size=1MB
spring.servlet.multipart.max-request-size=1MB
```

3.前端
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge"/>
<title>上传</title>
<link rel="stylesheet" th:href="@{/css/elementUI.css}">

<script th:src="@{/js/vue.js}"></script>

<script th:src="@{/js/axios.js}"></script>

<script th:src="@{/js/elementUI.js}"></script>
</head>
<body id="main">
<div style="float: right;" sec:authorize="hasRole('admin')">
<el-button @click="attendanceDialogVisible = true">上传表格</el-button>
<el-dialog title="表格上传" :visible.sync="attendanceDialogVisible" width="40%">
<br><br>
<el-row :gutter="80">
<el-col :span="6" :offset="4">
<el-date-picker
v-model="dateValue"
type="date"
placeholder="选择日期"
format="yyyy年MM月dd日"
value-format="yyyy年MM月dd日">
</el-date-picker>
</el-col>
<el-col :span="12">
<el-upload
class="upload-demo"
ref="upload"
action="/manage/doUploadAttendance"
:data="attendanceTime"
:limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:on-preview="handlePreview"
:on-remove="handleRemove"
:auto-upload="false"
:on-success="handleSuccess">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUp">
上传文件
</el-button>
<div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
</el-upload>
</el-col>
</el-row>
<br> <br>
</el-dialog>
</div>
</body>
<script>
new Vue({
el: "#main",
data() {

return {
attendanceDialogVisible: false,
dateValue: '',
attendanceTime: {
upTime: ""
}

}
},
mounted() {

},
methods: {
submitUp() {
if (this.dateValue =="") {
this.$message({
showClose: true,
message: '请先选择日期！',
type: 'error',
offset: 200,
duration: 1000
});
return;
}
this.attendanceTime.upTime = this.dateValue;
this.$refs.upload.submit();
},
handlePreview(file, fileList) {

},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handleSuccess(response, file, fileList) {
this.$message({
showClose: true,
message: '上传成功',
type: 'success',
offset: 200,
duration: 1000
});
this.attendanceDialogVisible=false;
}
}
})
</script>
</html>

元善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-19

#需求![Excel样例.png](https://upload-images.jianshu.io/upload_images/12383780-3009adfe3f18b890.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Excel文件数据导入，即将表格中的数据存储到数据库中，我这里使用了阿里的 easyExcel 实现整个过程，使用Maven工具#思路 1.文件上传，将Excel表格上传 2.读取Excel数据...
复制链接

扫一扫