¿Cómo subir un archivo utilizando flujos de Node.js y formularios HTML?
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
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:multer
utilizando npm:npm install --save multer
Requiere el paquete
multer
enindex.js
:const multer = require('multer');
Configura el middleware
multer
agregando el siguiente código después de la líneaconst fs
enindex.js
: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ónmulter
con el objetostorage
como argumento para configurar el middleware.Modifica la ruta
app.post
para incluir el middlewareupload
, de la siguiente manera:Esto le indica a
multer
que maneje la carga del archivo, y almacena el archivo resultante en el directoriouploads/
con el nombre original. Luego, en lugar de usarreq.pipe
para escribir el archivo en el disco, utilizamosreq.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.