fastapi,vue3+ts上传字体文件并获取字体的名字，文件路径，文件名称的业务逻辑

FastAPI是一个轻量级的Web框架，用于构建现代、高性能的RESTful APIs。Vue3（Vue 3.x）是一个流行的前端JavaScript框架，而TypeScript为其增加了静态类型检查。 要在FastAPI应用中处理文件上传，并结合Vue3和TS，你需要遵循以下步骤： 1. **设置FastAPI**: - 安装FastAPI：`pip install fastapi` - 创建一个FastAPI项目，配置路由接收文件上传请求。 ```python from fastapi import FastAPI, File, UploadFile app = FastAPI() @app.post("/upload_font") async def upload_font(font_file: UploadFile = File(...)): # 保存文件到服务器 file_path = save_font_to_server(font_file.filename, font_file.file) return {"name": font_file.filename, "path": file_path} ``` 2. **Vue3 + TypeScript组件**: - 使用`axios`或其他库从客户端发送POST请求到上述API端点。 ```typescript import axios from 'axios'; async function uploadFont(file: File): Promise<any> { try { const formData = new FormData(); formData.append('font_file', file); const response = await axios.post('/upload_font', formData, { headers: {'Content-Type': 'multipart/form-data'} }); return response.data; } catch (error) { console.error(error); return null; } } ``` 3. **文件操作函数**: - `save_font_to_server(filename: string, file: any)` 会将文件内容保存到服务器指定目录，同时返回存储路径。 ```typescript async function save_font_to_server(filename: string, file: Buffer): Promise<string> { // 保存文件的具体逻辑 let filePath = "./uploads/" + filename; fs.writeFileSync(filePath, file); // 使用Node.js fs模块 return filePath; } ``` 4. **业务逻辑**: - 检查上传的文件是否真的为字体文件（例如.ttf或.otf），如果不是，则需要错误处理。 - 提供成功或失败的提示给用户，并返回上传的信息。