Vue3 + FastAPI发送含数据与文件的表单报错排查

我尝试用Vue3构建包含family_type_id字段和图片的表单，通过FormData封装数据，借助axios发送POST请求至FastAPI接口，但FastAPI始终返回“family_type_id字段缺失”的错误。相关信息如下：

错误信息 #

{
  "detail": [
    {
      "loc": ["query", "family_type_id"],
      "msg": "field required",
      "type": "value_error.missing"
    }
  ]
}

前端Vue3代码 #

methods: {
  handleFileChange(event) {
    this.file = event.target.files[0];
  },
  handleSubmit() {
    const formData = new FormData();
    formData.append('family_type_id', this.familyTypeId);
    formData.append('support', this.file);

    axios.post('http://localhost:8000/family_core_data/store', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });
  },
}

FastAPI Pydantic模型 #

from pydantic import BaseModel, Field
from fastapi import UploadFile
from typing import Union
from datetime import datetime
from decimal import Decimal

class FamilyCoreDatum(BaseModel):
   family_type_id: int

FastAPI路由代码 #

@family_core_data.post("/store")
def store(data: FamilyCoreDatum = Depends(), image: UploadFile = File(...)):
   data_received = data.dict()

    return {"message": data_received['family_type_id'], "image_filename": image.filename}

问题根源 #

你用Depends()获取FamilyCoreDatum实例时，FastAPI默认会从URL查询参数或JSON请求体中解析数据，但前端是把family_type_id放在multipart/form-data格式的FormData里，后端无法从默认位置找到该字段，因此抛出缺失错误。

修复方案 #

方案一：直接用Form字段接收（最简）

修改后端路由，用Form()直接接收family_type_id，和文件字段保持一致：

from fastapi import Form, UploadFile, File

@family_core_data.post("/store")
def store(family_type_id: int = Form(...), image: UploadFile = File(...)):
    return {"message": family_type_id, "image_filename": image.filename}

方案二：让Pydantic模型支持Form数据（保留模型结构）

如果需要复用FamilyCoreDatum模型，可以让模型支持从Form数据解析（FastAPI 0.95+版本支持）：

from fastapi import UploadFile, File, Form
from pydantic import BaseModel, FromForm

class FamilyCoreDatum(BaseModel):
    family_type_id: int

    class Config:
        from_attributes = True

@family_core_data.post("/store")
def store(data: FamilyCoreDatum = Form(...), image: UploadFile = File(...)):
    return {"message": data.family_type_id, "image_filename": image.filename}

额外检查

确认前端的this.familyTypeId有有效值（不是undefined或空值），否则即使后端适配，也会因为字段值为空导致错误。

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