este es mi código de reacción. Obtengo un resultado vacío cuando consola.log (req.body) en mi servidor express (como este-> { body: {} }) debería obtener todos los datos dentro de ese archivo csv en mi servidor, por favor ayuda , gracias de antemano
import React, { useState } from 'react'; import axios from 'axios'; const Form = () => { const [csvFile, setCSVFile] = useState(); const sendRequst = async () => { try { const res = await axios.post('http://localhost:4040/inventory/customer-segmentation', { body: csvFile }); } catch (err) { console.log(err); } }; const handleSubmit = (e) => { e.preventDefault(); console.log(csvFile) (*i get this File {name: 'convertcsv.csv', lastModified: 1636535333170, lastModifiedDate: Wed Nov 10 2021 14:38:53 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 3491, …}*) sendRequst(); }; return ( <div> <form onSubmit={handleSubmit}> <input type='file' accept='.csv' onChange({(e) => { setCSVFile(e.target.files[0]); }} /> <br /> <button type='submit'> Submit </button> </form> </div> ); }; export default Form;Como he hecho una tarea similar hoy, me gusta publicar una respuesta para ayudar a los futuros lectores :) (también uso mecanografiado, tailwindcss (para diseñar) en la siguiente respuesta que puede ignorar si no usa ninguna de las herramientas .
puede usar FormData para enviar un archivo csv en una solicitud posterior, creo que esta es la forma más sencilla de enviar archivos en una solicitud posterior.
en React puedes crear un formulario simple y poner un elemento de entrada con el tipo = "archivo" dentro. para que luego pueda usar useState hook para guardarlo como un estado. después de guardar el archivo usando useState hook, simplemente puede usar
formdata.append(name, value)y luego coloque los datos del formulario dentro del cuerpo de la solicitud de publicación de axios. (como buena práctica, escriba onSubmit={handleSubmit} en la etiqueta, no en el botón de envío)
const [csvFile, setCsvFile] = useState <Blob>(); const formData = new FormData(); if (csvFile){ formData.append('path_to_csv', csvFile); } const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => { if (e.currentTarget.files) setCsvFile(e.currentTarget.files[0]); }; const handleSubmit = (e:React.FormEvent<HTMLFormElement>) => { e.preventDefault(); async function fetchData() { const res:any = await axios.post( 'http://127.0.0.1:8000/end_point_name_here/', formData, ); console.log(res.data); } fetchData(); }; return ( <div className="flex flex-col gap-6 justify-center items-center h-screen"> <h1> Page Title</h1> <form onSubmit={handleSubmit}> <input type="file" accept=".csv" onChange={handleChange} /> <button type="submit" className="bg-blue-500 px-4 py-2 rounded-md font-semibold">fetch</button> </form> </div> ); };