Springboot 结合 axios 上传 excel 并将表格数据导入或更新mySql数据库
* Excel 文件的点击上传
* 1.前台页面发送一个请求,上传文件MutilpartFile HTTP
* 2.Controller,上传文件MutilpartFile 参数
* 3.POI 解析文件,里面的数据一行一行全部解析出来
* 4.每一条数据插入数据库
* 5.mybatiplus 批量saveBatch(list)
1 通过 引入 elementUi 实现 Excel 文件的上传
1.1 引入相关elementUi 相关文件
<link rel="stylesheet" th:href="@{/element-ui/css/element.css}" type="text/css"/>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/eui.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
1.2 使用 el-upload 上传
<el-upload
:auto-upload="true" //是否自动上传
:file-list="fileList"
:http-request="importWordConfirm"
:limit="1" //设置上传数量
:multiple="false"
accept=".xlsx,.xls" //仅支持上传 excel 文件
action
ref="upload">
<el-button icon="el-icon-download" plain slot="trigger" type="primary">导入</el-button>
</el-upload>
<script >
let v = new Vue({
el: '#app',
data: function () {
return {
fileList: [],
loading: false,
}
},
methods:{
importWordConfirm(item) {
const fileObj = item.file
const formData = new FormData()
formData.append('file', fileObj)
axios.post('/excelImport', formData, {
headers: {