vue excel导入mysql详细教程_Vue前端上传EXCEL文件，后端（springBoot+MyBatis+MySQL）解析EXCEL并批量插入/更新数据库...

文章目录

Vue前端

后端

controller层

service层：如何解析Excel文件

MyBatis：实现批量插入

在mysql中设置唯一索引Unique Index

MySQL中的insert ignore into, replace into等的一些用法总结

Vue前端

前端主要用了element-ui的upload组件。

class="filter-item"

name="excelFile"

:action="uploadUrl()"

:on-error="uploadFalse"

:on-success="uploadSuccess"

:before-upload="beforeAvatarUpload"

:limit="1"

accept=".xlsx,.xls"

:show-file-list="false"

:file-list="fileList">

批量上架

关于每个字段的意思：

uploadUrl() 是后台接口(接受上传的文件并做后端的逻辑处理) 注意：uploadUrl方法中，直接return的是你的后端URL接口，可以是相对路径，也可以是绝对路径。

upLoadData是上传文件时要上传的额外参数，也可以不写，将参数直接带在URL请求中

形似： url + “?businessName=” + this.businessName

uploadError是上传文件失败时的回掉函数

uploadSuccess是文件上传成功时的回掉函数

beforeAvatarUpload是在上传文件之前调用的函数，可以在这里进行文件类型的判断，对上传格式及大小作限制

**:auto-upload=“false”**是停止文件自动上传模式

**name=“excelFile”**这里是将导入的EXCEL文件命名，并传给后端，所以后端接口的入参也要是这个名字，下面会贴代码。

:file-list=“fileList” 显示已上传的文件列表

uploadSuccess(response, file, fileList) {

console.log(response)

if (response.code==200) {

this.$message({

message: response.mess