Загрузка изображения из React в FastAPI вызывает ошибку 422 Unprocessable Entity ⇐ Python

[Anonymous]

Я создал API с использованием FastAPI, который обрабатывает загруженное изображение и возвращает обработанное изображение.
Вот конечная точка загрузки изображения:

Код: Выделить всё

@app.post("/predict")
async def root(file: UploadFile = File(...)):
..............................
res,im_png = cv2.imencode(".png", bg_img)
return StreamingResponse(io.BytesIO(im_png.tobytes()), media_type="image/png")

Что я сделал во внешнем интерфейсе:

Код: Выделить всё

class Detect extends Component {

state = {
title: '',
content: '',
image: null
};

handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
};

handleImageChange = (e) => {
this.setState({
image: e.target.files[0]
})
};

handleSubmit = (e) => {
e.preventDefault();
console.log(this.state);
let form_data = new FormData();
form_data.append('image', this.state.image, this.state.image.name);
let url = 'http://127.0.0.1:8000/predict';
axios.post(url, form_data, {
headers: {
'content-type': 'multipart/form-data'
}
})
.then(res => {
console.log(res.data);
})
.catch(err => console.log(err))
};

render() {
return (








);
}
}

export default Detect;

Когда я загружаю изображение через интерфейс и отправляю его, API возвращает

Код: Выделить всё

422

Ошибка (необрабатываемый объект)[/b], хотя при использовании пользовательского интерфейса Swagger она работала нормально.
Я считаю, что изображение не принимается FastAPI как тип, который он может обрабатывать. Как я могу решить эту проблему??

Подробнее здесь: https://stackoverflow.com/questions/713 ... tity-error