Estoy tratando de permitir que los usuarios carguen imágenes en mi aplicación (frontend React, backend Node). Quiero enviar el archivo cargado desde el cliente al servidor, luego realizar una solicitud desde mi servidor a las funciones de la nube de Firebase que se ocuparán del almacenamiento de la imagen.
Mi HTML para el formulario es el siguiente:
<div className='LoafGalleryWrap'> <h1 className='banner'>Illustrious Loafs</h1> <form> <label>Add a loaf to the exhibit: <input type='file' onChange={props.fileSelectedHandler} /> <button onClick={props.fileUploadHandler}>Upload</button> </label> </form> <button onClick={props.toggleDisplayLandingPage}>Back</button> </div>Obtengo los datos del archivo en mi aplicación con el siguiente método. En el archivo console.log, puedo ver los datos del archivo que quiero enviar a mi servidor.
fileUploadHandler(e) { e.preventDefault(); e.stopPropagation(); let file = this.state.selectedFile; let formData = new FormData(); formData.append('image', file); formData.append('name', file.name); const pic = formData.getAll('image'); console.log(formData) axios({ url: 'http://localhost:3001/uploadLoaf', method: 'POST', data: formData, headers: { "Content-Type": "multipart/form-data" } }) .then(respo => console.log(respo))}
En mi servidor, cuando reviso el cuerpo de la solicitud, no hay nada. Cierro la sesión y simplemente obtengo un objeto vacío. He intentado usar middlewares multer y connect-multipart pero ninguno ha tenido éxito en mostrar los datos del formulario. Lo que estoy haciendo es similar a lo que sugiere este artículo ( https://www.geeksforgeeks.org/file-uploading-in-react-js/ ), pero no sé cómo enviar los datos en mis formularios. . Cualquier orientación muy apreciada.
La ruta de mi servidor es la siguiente:
app.post('/uploadLoaf', (req, res) => { console.log('uploadLoaf endpoint reached'); console.log(req.body); res.status(201).json('complete') // axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, { // headers: { // 'Content-Type': 'multipart/form-data' // } // }) // .then(result => { // console.log(result); // res.send(result); // }) // .catch(err => { // console.log(err); // res.send(err) // }) });intenta reemplazar la función axios que tienes con esto
axios.post("http://localhost:3001/uploadLoaf", formData, { }) .then(res => { // then print response status console.log(res.statusText) })déjame saber qué usas en el backend y cuál es el resultado en la función res
Logré acceder a los datos del archivo FormData usando la función de carga de Multer. Mis importaciones y la ruta del servidor configuradas para que pueda acceder a los datos del archivo son las siguientes:
const multer = require("multer"); const upload = multer({ limits:{fileSize: 1000000}, }).single("image"); app.post('/uploadLoaf', (req, res) => { upload(req, res, (err) => { if (err) { res.sendStatus(500); } console.log(req.file); res.send(req.file); }); });Ahora no estoy seguro de cómo enviar los datos de este archivo a la API de la manera que la API espera, y aparece un error que dice: "Error: no se pudo manejar la solicitud". Pero al menos ahora puedo ver los datos del formulario.