No estoy seguro de por qué al realizar una solicitud POST en Postman, almaceno con éxito las URL en la base de datos tomando el archivo y recuperando su nombre.
Pero cuando lo pruebo en el navegador, aparece un error 500. El token de autenticación regresa correctamente, los datos registrados también contienen la información correcta, por lo que no me queda del todo claro qué estoy haciendo mal, aunque lo estoy haciendo exactamente de la misma manera que lo hago en Postman y funciona bien allí.
En los registros del servidor, veo un error que dice: Call to a member function getClientOriginalName() on null , pero como se mencionó anteriormente, la carga funciona bien en Postman.
¿Cuál podría ser el problema?
Aquí está mi JS:
const [selectedFile, setSelectedFile] = useState(null); let authToken = localStorage.getItem('token'); const onFormSubmit = (e) => { e.preventDefault() fileUpload(selectedFile); } const onChange = (e) => { let files = e.target.files || e.dataTransfer.files; if (!files.length) { return; } createImage(files[0]); } const createImage = (file) => { let reader = new FileReader(); reader.onload = (e) => { setSelectedFile(e.target.result); }; reader.readAsDataURL(file); } const fileUpload = (selectedFile) => { const url = 'http://localhost:8005/api/file-upload'; const formData = {file: selectedFile} const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` } console.log(authToken); console.log(formData); console.log(headers); JSON.stringify(formData); axios.post(url, formData, { headers: headers }).then(resp => { console.log(resp); }).catch(error => { console.log(error); }); } return ( <form> <input type="file" onChange={onChange} name="userUpload" required/> <Button variant="primary" onClick={onFormSubmit}>Upload!</Button> </form> );debe verificar el tipo de contenido de su encabezado que debe establecerse en multipart/form-data