1、效果图

2、自定义上传

<a-upload
v-model:file-list="fileList"
name="导入员工"
action=""
:customRequest="upDown"
:beforeUpload="beforeUpload"
:onChange="handleChange"
@remove="removeFile"
accept=".xlsx,.xls"
><a-button class="btn btn_width" type="primary"> 上传Excel </a-button>
</a-upload>

import {queryAutograph,uploadOss,} from '@/api/import';
// 存储文件const fileList = ref<any[]>([]);// 导入文件const upDown = async (file) => {const random = Math.random();const fileName = `${random}${file.file.name}`;//获取oss签名queryAutograph({}).then(async (res) => {
//根据后端上传接口按需解构（这里是oss上传）const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;const address = dir + fileName;const url = host;const formData = new FormData();formData.append('key', address);formData.append('OSSAccessKeyId', OSSAccessKeyId);formData.append('Signature', Signature);formData.append('policy', policy);formData.append('success_action_status', success_action_status);formData.append('file', file.file);//这里必须放在最后，上面的顺序不限制// 上传OSStry {await uploadOss({ url, formData });} catch (e) {message.error('上传失败');return;}//拼接文件地址，用来传递给后端接口downloadUrl.value = host + '/' + address;let list: any = [];list.push({ name: file.file.name, url: downloadUrl });// fileList.value = list.flatMap((item) => item.url);fileList.value = list;});};// 删除文件const removeFile = (file) => {const index = fileList.value.indexOf(file.file);const newFileList = fileList.value.slice();newFileList.splice(index, 1);fileList.value = newFileList;console.log('删除成功：', fileList.value);};
// 文件上传测试import { message } from 'ant-design-vue';// 检查文件类型，如果文件类型正确，则继续上传,false指停止上传，true指继续上传，file是文件const beforeUpload = (file) => {// // 检查文件类型是否为Excelconst isExcel =file.type === 'application/vnd.ms-excel' ||file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';if (!isExcel) {message.error('只能上传Excel文件！');return false;}return true;};

import { request } from '@/utils/request';
const VUE_APP_OSS_API = process.env.VUE_APP_OSS_API;
const VUE_APP_VOICE_API = process.env.VUE_APP_VOICE_API;// OSS上传签名
export function queryAutograph(params) {return request({url: `${VUE_APP_VOICE_API}/oss/getSign`,method: 'get',params,});
}
// 上传OSS 请求
export const uploadOss = ({ url, formData }) => {const pro = process.env.NODE_ENV === 'development' ? VUE_APP_OSS_API : url;return request({url: pro,method: 'post',data: formData,headers: { 'Content-Type': 'multipart/form-data' },});
};

 3、思路：做文件上传时，一般使用自定义上传行为，用来覆盖默认行为，首先创建new FormData();及相关上传参数，并调用oss签名接口，拿到返回的host值之后拼接文件地址便于后面调用添加接口上送。（注意：这里使用的阿里云oss上传时，若遇到404情况，可考虑不使用代理，直接直传）

4、若不使用阿里云oss做文件上传时，可不需获取签名，创建完new FormData();及相关参数之后，直接调用后端上传接口即可。

// 存储文件const fileList = ref<any[]>([]);// 导入文件const upDown = async (file) => {fileList.value = [];fileList.value.push(file.file);const formData = new FormData();formData.append('file', fileList.value[0]);await importData(formData).then((res) => {message.info('文件上传成功');// downloadUrl.value = `${platformApi}/dataCockpit/out/common/get-sheet-from-excel`;console.log('导入成功：', res);console.log('文件列表：', fileList.value);}).catch((err) => {message.error(err);});
}