java 接受导入文件,上传EXCEL文件到后端，导入并解析EXCEL的前后端实现（Vue.js + java后端）-Go语言中文社区...

vue.js前端，Java后端，如何导入excel文件，并且解析，本文给了前后端代码的实现，以及完美实践OK之后的分享。

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

1.VUE前端demo

class="upload-demo"

ref="upload"

:action="uploadUrl()"

:data="uploadData"

name="excelFile"

:on-preview="handlePreview"

:on-remove="handleRemove"

:file-list="fileList"

:on-error="uploadFalse"

:on-success="uploadSuccess"

:auto-upload="false"

:before-upload="beforeAvatarUpload">

选取文件

批量导入

只能上传excel文件

关于每个字段的意思：

uploadUrl() 是后台接口(接受上传的文件并做后端的逻辑处理)

！！！注意：uploadUrl方法中，直接return的是你的后端URL接口，可以是相对路径，也可以是绝对路径

取相对路径的时候，会自动加上请求所在页面的前缀htpp://XXX作为请求URL的前缀，如果这样拼接的不对，自己就加上绝对路径：http://localhost:8080/XX 这样类似的URL

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

形似： url + "?businessName=" + this.businessName

uploadError是上传文件失败时的回掉函数，uploadSuccess是文件上传成功时的回掉函数，

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

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

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

:file-list="fileList" 显示已上传的文件列表，效果见下图3

选取文件

批量导入

是为了实现将选取文件和上传分开,效果如下：