Estoy tratando de depurar este código ReactJS donde, independientemente de lo que intente, el backend no recibe ningún dato en el cuerpo y el archivo no está definido. Verifiqué imprimiendo todos los datos (usuario y element.files[0]) hasta la línea justo antes de la solicitud de axios y todo parece funcionar bien.
Justo cuando la solicitud llega al backend, los datos no se muestran.
código js parcial:
async function updateAvatar(element) { let data = new FormData(); // `user` is an object that exists as a state data.append('user', user); data.append('file', element.files[0]) const response = await axios.post(`http://localhost:3001/user/upload_avatar`, data, { headers: { "Content-Type": "multipart/form-data" } }); }Código HTML parcial:
<label htmlFor='update-avatar'><span className='btn btn-outline-primary'>Update</span></label> <input id='update-avatar' type={'file'} className='custom-file-upload' onChange={e => updateAvatar(e.target)} />El código funcionaba hasta ayer y no envía datos correctamente desde hoy.
¿Alguien ve algún problema con el código?
La solución fue realmente muy simple. Tuve una diferencia en el nombre de la variable ( user ) en la interfaz FormData () y el código multer de back-end ( user_name ). Esto estaba causando el problema. Al cambiar el nombre de la variable en multer a usuario, la solicitud funciona bien.