我使用 FastApi 創建了一個 API，用于處理上傳的影像并回傳處理后的影像。
這是圖片上傳端點
@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 (
<div className="App">
<form onSubmit={this.handleSubmit}>
<p>
<input type="file"
id="image"
accept="image/png, image/jpeg" onChange={this.handleImageChange} required/>
</p>
<input type="submit"/>
</form>
</div>
);
}
}
export default Detect;
當我通過前端上傳影像并提交時，API 顯示"Unprocessable Entity"，而當我使用 Swagger UI 時它作業正常。
我認為影像沒有被 FastApi 接收為可以處理的型別我該如何解決這個問題？
uj5u.com熱心網友回復：
您應該將您的影像添加到FormData物件中，使用key在端點中定義的相同檔案上傳（在您的情況下，即file）。因此，您應該這樣做：
form_data.append('file', this.state.image, this.state.image.name);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435182.html
標籤：javascript Python 反应 axios 快速API