Cómo cargar imágenes con un backend Node.js en Multer y Express

Introducción

Si bien puede cargar imágenes en el frontend, deberá implementar una API y una base de datos en el backend para recibirlas. Con Multer y Express , un marco de Node.js, puede establecer cargas de archivos e imágenes en una sola configuración.

En este artículo, aprenderá cómo cargar imágenes con un backend Node.js usando Multer y Express.

Prerrequisitos

• Se recomienda tener conocimientos de Node.js. Para obtener más información sobre Node.js, consulte nuestra serie Cómo codificar en Node.js.

• Se recomienda tener conocimientos generales sobre los métodos de solicitud HTTP en Express. Para obtener más información sobre los métodos de solicitud HTTP, consulte nuestro tutorial Cómo definir rutas y métodos de solicitud HTTP en Express .

Paso 1: Configuración del proyecto

Como Express es un framework Node.js, asegúrate de tener Node.js instalado antes de seguir los siguientes pasos. Ejecuta lo siguiente en tu terminal:

Crea un nuevo directorio con el nombre node-multer-expressde tu proyecto:

mkdir node-multer-express

Cambiar al nuevo directorio:

cd node-multer-express

Inicialice un nuevo proyecto Node.js con valores predeterminados. Esto incluirá su package.jsonarchivo para acceder a sus dependencias:

npm init

Crea tu archivo de entrada. index.jsAquí es donde manejarás la lógica de Express:

touch index.js

Instale Multer, Express y Morgan como dependencias:

npm install multer express morgan --save

Multer es su biblioteca de carga de imágenes y administra el acceso a los datos del formulario desde una solicitud Express. Morgan es un middleware de Express para registrar solicitudes de red.

Cómo aplicar Multer en su proyecto

Para configurar su biblioteca Multer, utilice el .diskStorage()método para indicarle a Express dónde almacenar los archivos en el disco. En su index.jsarchivo, solicite Multer y declare una storagevariable y asigne su valor a la invocación del .diskStorage()método:

índice.js

const multer = require('multer');const storage = multer.diskStorage({  destination: function(req, file, callback) {    callback(null, '/src/my-images');  },  filename: function (req, file, callback) {    callback(null, file.fieldname);  }});

La destinationpropiedad del diskStorage()método determina en qué directorio se almacenarán los archivos. Aquí, los archivos se almacenarán en el directorio . my-imagesSi no ha aplicado un destination, el sistema operativo utilizará de forma predeterminada un directorio para los archivos temporales.

La propiedad filenameindica el nombre que se le dará a los archivos. Si no establece un nombre de archivo, Multer devolverá un nombre generado aleatoriamente para sus archivos.

Nota: Multer no agrega extensiones a los nombres de archivo y se recomienda devolver un nombre de archivo completo con una extensión de archivo.

Una vez completada la configuración de Multer, combinémosla con su servidor Express.

Paso 2: Manejo del servidor Express

Su servidor Express es donde usted maneja la lógica de los métodos de solicitud HTTP, los métodos requestde responseciclo de vida y donde puede implementar las dependencias Multer y Morgan para la transferencia de archivos e imágenes.

En su index.jsarchivo, declare una appvariable y asigne a su valor una instancia de Express. Require en Multer y Morgan, y declare una uploadvariable para almacenar una instancia de Multer:

índice.js

import morgan from 'morgan';import express from 'express';const app = express();const multer = require('multer');const upload = multer({dest: 'uploads/'});app.use(express.json());app.use(express.urlencoded({extended: true}));app.use(morgan('dev'));app.use(express.static(__dirname, 'public'));

Utilizará el middleware de Express, .use(), para pasar el .json()middleware y analizar sus respuestas entrantes como un objeto JSON. Además, .use()acepta una invocación de morgan y el argumento 'dev'. Esto le indica a Express que use el entorno de desarrollo de morgan para alertarlo sobre el estado de la respuesta. Para crear archivos estáticos, transfiera el middleware de Express .static()a .use()y defina el directorio que contiene sus imágenes como argumento.

Una vez que haya configurado sus variables globales, configure una POSTsolicitud que acepte una ruta anónima y la devolución reqde responsellamada para recibir nuevos archivos e imágenes:

app.post('/', upload.single('file'), (req, res) = {  if (!req.file) {    console.log("No file received");    return res.send({      success: false    });  } else {    console.log('file received');    return res.send({      success: true    })  }});

Cuando la ruta anónima recibe un archivo o una imagen, Multer los guardará en el directorio especificado. El segundo argumento de su POSTsolicitud upload.single()es un método Multer integrado para guardar un archivo con una fieldnamepropiedad y almacenarlo en el req.fileobjeto Express. La fieldnamepropiedad se define en su método Multer .diskStorage().

Si desea integrar una base de datos, puede solicitar el nombre del archivo en su index.jsarchivo:

índice.js

const host = req.host;const filePath = req.protocol + "://" + host + '/' + req.file.path;

Guarde la variable filePathen la base de datos y opere su base de datos con los nombres de archivos entrantes.

Conclusión

Express le ofrece un proceso para guardar y almacenar archivos e imágenes entrantes en su servidor. La dependencia de middleware Multer optimiza los datos de su formulario para gestionar múltiples cargas de archivos.

Si desea obtener más información sobre Node.js, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de Node.js para obtener ejercicios y proyectos de programación.