vue3 + ts + Ant Design Vue实现文件上传

<a-row type="flex">
	<a-col :span="4">上传文件：</a-col>
	<a-col style="color:#F64545">
	    <a-upload 
            v-model:file-list="fileList"
            name="file"
			:multiple="true"
			action="上传文件的接口地址"
			:headers="headers"
			@change="handleChange"
		>
			<a-button type="primary">
			    <upload-outlined></upload-outlined>
				    选择文件
			</a-button>
		</a-upload>
	</a-col>
</a-row>

// 引入保存token的文件
import { useUserStore } from "/@/store/modules/user";

interface FileItem {
	uid: string;
	name?: string;
	status?: string;
	response?: string;
	url?: string;
}
	
interface FileInfo {
	file: FileItem;
	fileList: FileItem[];
}


setup(){
    const fileList = ref([]);
    const handleChange = (info: FileInfo) => {
        
		fileList.value = info.fileList.slice(-1) // 这里限制只保留一条上传数据 如不限制可直接屏蔽

		if (info.file.status !== 'uploading') {
			console.log(info.file, info.fileList);
		}
		if (info.file.status === 'done') {
			message.success(`${info.file.name} 上传成功`);
		} else if (info.file.status === 'error') {
			message.error(`${info.file.name} 上传失败`);
		}
	};
    
    // 我的token
    const userStore = useUserStore();
	const token = userStore.getToken;
	const headers = "Bearer " + token
    return {
        fileList,
        headers: {
			authorization: headers,
		},
		handleChange
    }
}