es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Quiero mandar un archivo CSV desde una aplicación de React.js a un servidor de Node.js y después trabajar con ese CSV en el servidor.

Quiero mandar un archivo CSV desde una aplicación de React.js a un servidor de Node.js y después trabajar con ese CSV en el servidor.

31 May, 2023 Programación

No sé cómo conectar la aplicación React y el servidor Node.js. En mi aplicación React tengo una entrada con type=”file” donde subo mi archivo CSV y luego presiono el botón para enviar este archivo al servidor Node.js.

Actualización:
Mi código de servidor:
“`
var express = require('express');
var app = express();

const bodyParser = require("body-parser");
const CsvUpload = require("express-fileupload");

app.use(CsvUpload());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/EXPRESSENDPOINT',
(req, res, next) => { console.log(req.body)});

app.listen(8080, () => {
console.log('¡Aplicación escuchando en el puerto 8080!');
});
<code>
Mi App.js:
</code>
import './App.css';
import React, { useState, useEffect } from "react";
import axios from 'axios'

function App() {
const [csvFile, SetCsvFile] = useState();
return (

<div className="App">
<header className="App-header">
<div>
Seleccionar archivo
<input type="file" name="file" onChange={e => {
SetCsvFile(e.target.files)
const formData = new FormData();
formData.append('name', "NOMBREDELARCHIVO");
formData.append('file', csvFile);

<pre><code> const url = 'http://localhost:8080/EXPRESSENDPOINT';
axios({
method: 'POST',
url: url,
headers: {
ContentType: 'multipart/form-data'
},
body: formData
})
.then(res => console.log(res))
.catch(err => console.log(err));

}} />
</div>
</header>
</div>

);

export default App;
“`

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para conectar tu aplicación React a tu servidor Node.js, necesitarás hacer una petición HTTP POST desde tu aplicación React a tu servidor. Sigue los siguientes pasos:

    1. Primero, importa la biblioteca axios en tu aplicación React. Puedes hacer esto agregando la siguiente línea al comienzo de tu archivo App.js:

      import axios from 'axios';

    2. En tu archivo App.js, crea una variable de estado para almacenar el archivo CSV cargado. Puedes hacer esto agregando la siguiente línea al comienzo de tu componente de función:

      const [csvFile, setCsvFile] = useState(null);

      Esta variable de estado almacenará el objeto de archivo devuelto por el campo de entrada.

    3. En tu campo de entrada, agrega un atributo onChange para capturar el objeto de archivo y almacenarlo en la variable de estado csvFile. Puedes hacer esto actualizando el campo de entrada existente de la siguiente manera:

      <input type="file" name="file" onchange="{e" ==""> {
 setCsvFile(e.target.files[0]);
}} />

    4. En el mismo controlador de eventos onChange, crea un nuevo objeto FormData para contener los datos del archivo y cualquier dato adicional que desees enviar. Puedes hacer esto agregando las siguientes líneas dentro del controlador de eventos: 
      const formData = new FormData();
formData.append('name', 'NOMBREARCHIVO');
formData.append('file', csvFile);

      Reemplaza NOMBREARCHIVO con el nombre deseado de tu archivo.

    5. Ahora que tienes los datos del archivo listos para enviar, puedes usar axios para hacer una solicitud HTTP POST a tu servidor Node.js. Puedes hacer esto agregando las siguientes líneas dentro del mismo controlador de eventos:

      const url = 'http://localhost:8080/EXPRESSENDPOINT';
axios({
method: 'POST',
url: url,
headers: {
  'Content-Type': 'multipart/form-data'
},
data: formData
})
.then(res => console.log(res))
.catch(err => console.log(err));

      Reemplaza EXPRESSENDPOINT con el punto final deseado en tu servidor Node.js.

    6. Finalmente, en tu servidor Node.js, necesitas agregar middleware para manejar la carga de archivos. Puedes hacer esto agregando las siguientes líneas al comienzo de tu código de servidor:

      const bodyParser = require('body-parser');
const CsvUpload = require('express-fileupload');

app.use(CsvUpload());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

      Reemplaza app con el nombre de tu instancia de aplicación express.

    7. Para probar tu conexión, ejecuta tu servidor Node.js y tu aplicación React, y trata de cargar un archivo CSV. Deberías ver los datos del archivo registrados en la consola de tu servidor, y deberías ver una respuesta exitosa registrada en la consola de tu navegador.

Comments are closed.