2020-08-19

#需求

  Excel文件数据导入，即将表格中的数据存储到数据库中 ，我这里使用了阿里的 easyExcel 实现整个过程，使用Maven工具
#思路
  1.文件上传，将Excel表格上传
  2.读取Excel数据
  3.数据存入数据库中
#操作
  1.导入依赖
```
<!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
<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}">

    <!-- 引入vue 在 elementUI 之前 -->
    <script th:src="@{/js/vue.js}"></script>
    <!--引入 axios.js -->
    <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>