FastAPI处理文件上传请求时遭遇422错误的解决方法

问题场景 #

前端通过FormData上传文件+表单字段，后端用FastAPI的UploadFile和Form接收参数。不添加文件时请求正常，添加文件后返回422错误。

前端代码 #

const formData = new FormData()
formData.append("file", note.file[0])
formData.append("name", "John Doe")
formData.append("email", "johndoe@example.com")

const response = await axios.post(url, formData)

后端代码 #

from fastapi import FastAPI, File, UploadFile, Form, Depends
from sqlalchemy.orm import Session

# 假设get_db和get_current_user已定义
app = FastAPI()

@app.post("/create-course")
def create_course(
    file: UploadFile = File(...), 
    name: str = Form(...), 
    email: str = Form(...), 
    db: Session = Depends(get_db), 
    user: dict = Depends(get_current_user)
):
    # 业务逻辑
    return {"success":"true"}

核心原因及解决方法 #

1. Axios请求头错误（最常见） #

Axios默认会自动识别FormData并设置正确的multipart/form-data请求头（包含boundary分隔符）。如果手动设置了Content-Type: multipart/form-data，会丢失boundary参数，导致后端无法解析表单数据，触发422错误。

解决： 确保请求时不手动设置Content-Type。如果之前代码里有类似以下配置，直接删除：

// 错误示例，需删除
headers: {
  'Content-Type': 'multipart/form-data'
}

2. 前端File对象无效 #

检查note.file[0]是否为有效的File对象。可以在代码中添加日志验证：

console.log(note.file[0]) // 确认输出是File类型，包含name、size等属性
if (!note.file[0]) {
  console.error("未获取到有效文件")
  return
}

3. 后端路由配置缺失 #

确认后端接口已添加@app.post装饰器，并且路由路径与前端请求的url完全一致。

验证修改 #

调整后重新发送请求，若文件和表单字段能被后端正确接收，即可解决422错误。

内容的提问来源于stack exchange，提问作者Lilo Lange