<template>
<div class="upload-page">
<el-upload action="" class="upload-demo" drag accept=".xlsx, .xls" :on-exceed="exceedFile" :on-error="handleError"
:on-success="handleSuccess" :http-request="uploadExcel" :before-upload="beforeUPload" :show-file-list="true"
:limit="1">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
</template>
</el-upload>
</div>
</template>
<script setup lang="ts">
import http from "@/utils/http";
import { ElMessage, ElMessageBox } from 'element-plus'
//上传文件之前先判断该文件是否是Excel文件
// 文件上传之前判断
const beforeUPload = (file: any) => {
const isExcel =
file.type === 'application/vnd.ms-excel' ||
file.type ===
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isExcel)
ElMessageBox({
title: '温馨提示',
message: '上传文件只能是 xls / xlsx 格式!',
type: 'warning',
});
if (!isLt2M)
ElMessageBox({
title: '温馨提示',
message: '上传文件大小不能超过 20MB!',
type: 'warning',
});
return isExcel && isLt2M;
};
// 文件数超出提示
const exceedFile = () => {
ElMessage.warning('最多只能上传一个文件!');
};
// 上传错误提示
const handleError = () => {
ElMessage.error('导入数据失败,请您重新上传!');
};
//上传成功提示
const handleSuccess = () => {
ElMessage.success('导入数据成功!');
};
// 文件上传
const uploadExcel = async (param: any) => {
let fileFormData = new FormData();
fileFormData.append('file', param.file);
//导入公用人事考勤数据
await http({//这里的http就是普通的axios实例
method: 'post',
url: 'xxxx',
headers: { "Content-Type": "multipart/form-data" },
data: fileFormData
})
};
</script>