使用element的文件上传组件
<!-- 在调用接口上传文件时,使用变量<isUpdata>来替换按钮,实现选择文件完成后按钮的加载状态 -->
<!-- 如果当前上传文件按钮存在于按钮组中,记得添加类名添加左右外边距10px -->
<el-upload
v-if="!isUpdata"
class="upload-demo mr10"
action="url"
:before-upload="beforeImport"
:show-file-list="false"
>
<el-button type="primary" icon="el-icon-upload2">员工导入</el-button>
</el-upload>
<el-button
v-else
type="primary"
:loading="true"
icon="el-icon-download"
>员工导入</el-button>
// 导入文件验证
beforeImport(file) {
const testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
// 格式验证
const extension = testmsg === "xls";
const extension2 = testmsg === "xlsx";
if (!extension && !extension2) {
this.$message({
type: "warning",
message: "只能上传 xls、xlsx格式的文件"
});
} else {
// 正确回调
this.$message.success("验证成功");
}
return false;
}