Estoy tratando de cargar la imagen en reaccionar, utilicé la extensión **reaccionar-imagen-cargar**. Usé este código para mostrar imágenes en una página web.

 import React from 'react'; import ImageUploader from 'react-images-upload'; class App extends React.Component { constructor(props) { super(props); this.state = { pictures: [] }; this.onDrop = this.onDrop.bind(this); } onDrop(pictureFiles, pictureDataURLs) { this.setState({ pictures: pictureFiles }); } render() { return ( <ImageUploader withIcon={true} buttonText='Choose images' onChange={this.onDrop} imgExtension={['.jpg', '.gif', '.png', '.gif']} maxFileSize={5242880} /> ); } }

Ahora la imagen se muestra en la página web, pero no sé cómo cargarla y guardarla en una carpeta. Estoy tratando de usar este código.

1. Esta línea es para onChange

 onDrop(pictureFiles, pictureDataURLs) { this.setState({ picture: pictureFiles }); }

2. Esta línea está cargando la imagen, pero no sé cómo funcionará y si necesito agregar el backend.

 uploadHandler = () => { const formData = new FormData(); formData.append('file', this.state.picture); console.log() let context = 'profile'; service.uploadImage(formData, this.state.picture, context, (res) => { if (res.status === "ERROR") { console.log("ERROR: ", res); stopLoading(); } }); }

Y la función de carga -

 export const uploadImage = (file, fileName, context, onDone) => { console.log(fileName) post(encodeURI("/api/upload-files/" + fileName + "/" + context), file, (res) => { onDone(res.data); }); };

Y el código de fondo, estoy usando FastAPI-Python para ello-

 @router.post("/upload-files") async def image(image: UploadFile = File(...)): print(image.filename) return {"filename": image.filename}

Revisé los valores y los resultados están justo en el backend, pero en la página web muestra 422: error de preprocesamiento. Por favor, dame una idea de cuál es el proceso o alguna pista para que pueda completar el código.