Angular向FastAPI上传FormData时遇422错误，请求技术排查

错误原因 #

你的FastAPI接口中，UserData依赖默认会尝试从JSON请求体解析数据，但Angular发送的是multipart/form-data格式的FormData，两者不兼容；同时错误提示file字段缺失，大概率是UserData模型中定义了file字段，或参数解析逻辑错误导致FastAPI无法正确识别表单中的数据。

修复步骤 #

1. 修改FastAPI接口定义 #

需要让UserData从表单数据中获取，而非默认的JSON body，有两种实现方式：

方式一：直接用Form字段定义

先导入必要模块：

from fastapi import FastAPI, File, UploadFile, Form
from pydantic import BaseModel
from typing import Annotated

假设你的UserData模型是：

class UserData(BaseModel):
    username: str
    email: str
    # 其他用户信息字段

修改接口，将所有用户字段用Form()标记，再组装成UserData对象：

@app.post('/register')
async def register_user(
    username: Annotated[str, Form()],
    email: Annotated[str, Form()],
    # 补充其他UserData字段，均用Form()标记
    image: UploadFile = File(...)
):
    # 组装UserData对象
    user = UserData(username=username, email=email)
    # 后续处理逻辑
    ...

方式二：自定义依赖解析表单到模型

如果字段较多，可创建依赖函数统一解析：

async def parse_user_form(
    username: Annotated[str, Form()],
    email: Annotated[str, Form()]
) -> UserData:
    return UserData(username=username, email=email)

@app.post('/register')
async def register_user(user: UserData = Depends(parse_user_form), image: UploadFile = File(...)):
    # 直接使用user对象处理
    ...

2. 检查Angular端的FormData正确性 #

• 确保传递的image是合法的File对象：从文件选择框获取时，要取files[0]，比如：

  onFileSelect(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedImage = input.files[0];
    }
  }
  

• 确认query对象的字段名和FastAPI中UserData的字段完全一致，避免拼写错误。
• 检查UserData模型是否包含file字段，如果有，直接删除（文件通过单独的image参数传递，不需要在用户模型中定义）。

3. 验证请求格式 #

Angular的HttpClient.post发送FormData时，会自动设置Content-Type为multipart/form-data，无需手动设置，避免手动设置导致的格式错误。

内容的提问来源于stack exchange，提问作者Abhay Chaudhari