我们选择一个按钮来实现上传，点击上传按钮，可从本地选择文件上传，确定后传递给后端。
首先，封装一个按钮：
<el-upload
style="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博客
