[Python] How to send a form with data and a File in Vuejs 3 and FastAPI? [duplicate]

I am trying to create a very simple form where I can send two fields, that they are family_type_id and an image. The thing is when I try to send them, FastAPI displays an error saying this:

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


It says that I am not sending the family_type_id and the schema is blocking me, but it is not true because I am sending the data like this:

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);

// Usando vue-axios para enviar la solicitud
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);
});
},


I am sending the data with POST and I am using formData to append every single field and then sending all. My schema in FastAPI is like this:

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


My router is this one:

@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}


Could anyone tell me what I am not seeing? Because I see that it's ok. Thanks.

Continue reading...