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.

¿Cómo subir un archivo utilizando flujos de Node.js y formularios HTML?

18 Jul, 2023 Programación

Quiero subir un archivo usando NodeJS streams y formularios HTML. Tengo un servidor simple.
Funciona cuando subo el archivo usando Postman. Pero cuando lo subo a través de un formulario HTML, el archivo se carga pero no se puede leer. ¿Cómo puedo hacerlo?

Este es index.js:

const app = require('express')();
const fs = require('fs');

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.post('/file-upload', (req, res) => {
    const filePath = 'uploads/uploaded-file';
    const stream = fs.createWriteStream(filePath);
    req.pipe(stream);
    stream.on('close', () => {
        res.send({ status: 'success', filePath })
    });
});

// Iniciar servidor
app.listen(3000, () => console.log("El servidor se está ejecutando en localhost:3000"));

Este es index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <h1>File Upload</h1>
    <form method="post" action="/file-upload" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" name="upload">
    </form>
</body>
</html>

Esta es la captura de pantalla de la solicitud de Postman:
Imagen postman

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el archivo subido sea legible al cargarlo a través de un formulario HTML, es necesario utilizar el middleware multer. Aquí están los pasos para hacerlo:

    1. Instala el paquete multer utilizando npm:

      npm install --save multer

    2. Requiere el paquete multer en index.js:

      const multer = require('multer');

    3. Configura el middleware multer agregando el siguiente código después de la línea const fs en index.js:

      const storage = multer.diskStorage({
    destination: 'uploads/',
    filename: function(req, file, cb) {
        cb(null, file.originalname);
    }
});

const upload = multer({ storage: storage });

      Esto crea el objeto storage que especifica dónde se almacenarán los archivos cargados y cómo se llamarán. Luego, se llama a la función multer con el objeto storage como argumento para configurar el middleware.

    4. Modifica la ruta app.post para incluir el middleware upload, de la siguiente manera:

      app.post('/file-upload', upload.single('file'), (req, res) => {
    const filePath = 'uploads/' + req.file.originalname;
    const stream = fs.createWriteStream(filePath);
    req.file.stream.pipe(stream);
    stream.on('close', () => {
        res.send({ status: 'success', filePath })
    });
});

      Esto le indica a multer que maneje la carga del archivo, y almacena el archivo resultante en el directorio uploads/ con el nombre original. Luego, en lugar de usar req.pipe para escribir el archivo en el disco, utilizamos req.file.stream.pipe para escribir el archivo en el disco, lo que permite que el archivo se lea correctamente.

    Con estas modificaciones, deberías poder cargar archivos a través del formulario HTML y que sean legibles.

Comments are closed.