我们选择一个按钮来实现上传，点击上传按钮，可从本地选择文件上传，确定后传递给后端。

首先，封装一个按钮：

                    <el-uploadstyle="display: inline-block"action="string":limit="1":file-list="fileList":on-error="loadFileError":on-success="loadFileSuccess":before-upload="beforeUpload"accept=".xlsx,.xls":show-file-list="false":http-request="uploadFile"><el-button type="primary" plain>导入关联商品</el-button></el-upload>

我们来看一下这里面的每个属性的作用：

limit: 代表一次可上传的文件数量
file-list： 代表自己定义的属性
on-error： 代表导入文件失败的时候提示的方法
on-success：代表导入文件成功提示的方法
before-upload：代表在上传前检查文件的格式、数据大小、信息等，判定文件是否能够上传
show-file-list：代表是否显示文件列表，false不显示
http-request：本次用来进行上传给后端的方法

接下来是script部分：

定义属性：

export default {name: "conferenceSignCard",data() {return {fileList: [], // 导入的文件};},
}

导入文件失败的提示方法：

    // 导入失败，其中$message为elementui的消息提醒组件loadFileError() {this.$message({message: "文件上传失败!",type: "error",});},

导入文件成功的提示方法：

    loadFileSuccess() {this.$message({message: "文件上传成功!",type: "success",});},

格式校验：上传前检查文件格式、数据大小等信息，判断是否能够上传。这里可导入xlsx和xls文件格式。

    // 导入前检查文件beforeUpload(file) {const extension = file.name.split(".")[1] === "xls";const extension2 = file.name.split(".")[1] === "xlsx";const isLt2M = file.size / 1024 / 1024 < 2;if (!extension && !extension2) {this.$message({message: "上传模板只能是 xls、xlsx格式!",type: "error",});}if (!isLt2M) {console.log("上传模板大小不能超过 2MB!");this.$message({message: "上传模板大小不能超过 2MB!",type: "error",});}return extension || extension2 || isLt2M;},

传递给后端的方法：

    uploadFile(param){const File = param.file;let formDataInfo = new FormData();formDataInfo.append("file", File);loadConferenceFile(formDataInfo).then((res) => {this.$message({message: res.data,type: "success",});});},

loadConferenceFile(formDataInfo){return axios.post("/signCard/loadConferenceFile",formDataInfo)}

完成！

参考文章：

elementUI加springboot实现上传excel文件给后端并读取excel_前端上传excel文件给后端可以吗-CSDN博客