No estoy seguro de por qué console.log(formData); muestra un vacío ( FormData {} ) al verificar la consola, a pesar de console.log(data); mostrando los datos correctos.

Además, cuando hago una solicitud POST , aparece un error que dice Missing boundary in multipart/form-data POST . Revisé SO y veo varios lugares que dicen que debo poner headers:{content-type: undefined} en los headers , pero eso no funcionó.

Creo que necesita usar FormData para enviar un archivo a través de una solicitud POST. ¿Cómo puedo enviar con éxito el archivo que se está cargando a través de una solicitud POST?

Nota: la API funciona con Postman, por lo que podemos descartar que la API sea el problema.

Código JS:

 import React, { useState } from 'react'; import {Button, Image, Modal} from "react-bootstrap"; const Gallery = () => { const [filePreview, setFilePreview] = useState(null); const [selectedFile, setSelectedFile] = useState(null); const handleShow = () => setShow(true); const handleFileInput = (e) => { setFilePreview(URL.createObjectURL(e.target.files[0])); setSelectedFile(e.target.files[0]); } const uploadFile = () => { var formData = new FormData(); formData.append("userUpload",selectedFile); console.log(formData); const data = { 'userUpload': selectedFile } const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` } console.log(data); axios.post('http://localhost:8005/api/file-upload', data, {headers}) .then(resp => { console.log(resp); }).catch(error => { console.log(error); }); } return ( <form encType="multipart/form-data"> <div className="fileUpload text-center"> <input type="file" onChange={handleFileInput} name="userUpload" required/> <Button variant="primary" onClick={handleShow}> Launch demo modal </Button> </div> <Modal show={show} onHide={handleClose}> <Modal.Body> <Image fluid src={filePreview}/> </Modal.Body> <Modal.Footer> <Button variant="primary" onClick={() => uploadFile()}>Upload!</Button> </Modal.Footer> </Modal> </form> ); } export default Gallery;