Estoy tratando de enviar archivos usando reaccionar js para expresar el servidor. pero cuando envío un archivo desde la interfaz, obtuve un valor nulo en el servidor.

Frontend: He iniciado sesión en consola en el frontend, todo está bien en el frontend.

 const ProductImport = function () { const [file, setFile] = useState<any>(); const [isLoading, setIsLoading] = useState<boolean>(false); const [fileName, setFileName] = useState(""); const saveFile = (e) => { setFile(e.target.files[0]); setFileName(e.target.files[0].name); }; const uploadFile = async (e: any) => { e.preventDefault() const formData = new FormData(); formData.append("file", file); formData.append("fileName", fileName); console.log(file); console.log(fileName); fetch('http://localhost:5000/upload-excel', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.insertedId) { alert('excel Added') } }) .catch(error => { console.error('Error:', error); }); }; return ( <form onSubmit={uploadFile}> <label htmlFor="formGroupExampleInput" className="form-label">Example label</label> <input type="file" onChange={saveFile} /> <button type="submit">Upload</button> </form> ) }

Backend: el problema es con el backend, obtuve nulo

 //MIddleware app.use(cors()) app.use(express.json()) app.use(cors()); app.use(fileupload()); app.use(express.static("files")); app.use(bodyParser.json({ limit: "50mb" })); app.use(bodyParser.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 })); app.post("/upload-excel", async (req, res) => { const file = req.files; console.log(file); });

Consola frontal:

Consola de fondo: