Creé una API usando FastApi que procesa la imagen cargada y devuelve la imagen procesada.
Aquí está el punto final de carga de la imagen
@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")Lo que he hecho en la interfaz:
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;Cuando cargo la imagen a través de la interfaz y la envío, la API muestra "Entidad no procesable" , aunque funcionaba bien cuando usaba la interfaz de usuario de Swagger.
Lo que creo es que FastApi no recibe la imagen como un tipo que puede procesar. ¿Cómo puedo resolver este problema?
Debe agregar su imagen al objeto FormData , usando la misma key definida en el punto final para la carga del archivo (en su caso, es decir, file ). Por lo tanto, debe hacer:
form_data.append('file', this.state.image, this.state.image.name);