vue3+ts 使用el-upload上传excel文件并自定义发送请求

近期做到的项目中有涉及到上传文件的需求，因为是pc管理后台，用到了[element-plus]框架，就突发奇想把他抽离了一下方便使用。

	<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>

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>