如何在FastAPI中定义适配Angular文件上传的REST接口并解决422报错

问题原因 #

422报错是FastAPI请求参数校验失败导致的，你当前的代码有两个核心问题：

• 前后端表单字段名不匹配：前端通过FormData.append("thumbnail", file)上传文件时用的字段名是thumbnail，但后端接口定义的接收参数名为file，FastAPI找不到对应字段就会返回校验失败。
• UploadFile对象不能直接求长度：你代码中len(file)的写法是错误的，UploadFile是文件对象，不能直接通过len()获取文件大小。

修改后的FastAPI接口代码 #

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 必须配置CORS，否则Angular前端跨域请求会被拦截
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:4200"],  # Angular默认开发服务地址
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/thumbnail-upload")
def create_file(thumbnail: UploadFile = File(...)):  # 把参数名改成和前端一致的thumbnail
    print(thumbnail.filename)
    # 读取文件内容后获取大小，FastAPI 0.65+版本也可以直接使用thumbnail.size属性
    file_content = thumbnail.file.read()
    return {"file_name": thumbnail.filename, "file_size": len(file_content)}

补充检查项 #

如果修改后还是报错，可以先做如下验证：

• 不要手动给Angular的POST请求设置Content-Type: multipart/form-data，HttpClient会自动处理带boundary的请求头，手动设置会导致请求格式错误
• 打开浏览器网络控制台，确认POST请求的FormData里确实存在名为thumbnail的文件字段
• 启动FastAPI服务后，访问http://localhost:8000/docs打开自动生成的接口文档，直接在页面上测试上传接口是否能正常运行

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