Advertisement
  1. Code
  2. Node.js

Subir archivos con Multer en Node.js y Express

Scroll to top
Read Time: 5 min

Spanish (Español) translation by Ruben Solis (you can also view the original English article)

Cuando un cliente web sube un archivo a un servidor, generalmente lo envía a través de un formulario y se codifica como multipart/form-data. Multer es un middleware para Express y Node.js que hace que sea fácil manipular este multipart/form-data cuando tus usuarios suben archivos.

En este tutorial, te mostraré cómo usar la biblioteca Multer para manejar diferentes situaciones de carga de archivos en Node.

¿Cómo funciona Multer?

Como dije anteriormente, Multer es un middleware para Express. Un middleware es una pieza de software que conecta diferentes aplicaciones o componentes de software. En Express, un middleware procesa y transforma las peticiones entrantes en el servidor. En nuestro caso, Multer actúa como un ayudante al cargar archivos.

Configuración del proyecto

Utilizaremos el framework para Node llamado Express para este proyecto. Por supuesto, necesitarás tener Node instalado.

Crea un directorio para nuestro proyecto, navega en el directorio y teclea npm init para crear un archivo .json que administre todas las dependencias de nuestra aplicación.

A continuación, instala Multer, Express y las demás dependencias necesarias para iniciar una aplicación Express.

A continuación, crea un archivo server.js.

Luego, en server.js, inicializaremos todos los módulos, crearemos una aplicación Express y crearemos un servidor para conectarse a los navegadores.

Ejecutar node server.js y navegar a localhost: 3000 en tu navegador debería darte el siguiente mensaje.

welcome messagewelcome messagewelcome message

Crear el código del cliente

Lo siguiente será crear un archivo index.html para escribir todo el código que se servirá al cliente.

Este archivo contendrá los diferentes formularios que utilizaremos para cargar nuestros diferentes tipos de archivos.

Abre server.js y escribe una ruta GET que muestre el archivo index.html en lugar del mensaje "WELCOME" ("BIENVENIDO", en español).

Almacenamiento con Multer

Lo siguiente será definir una ubicación de almacenamiento para nuestros archivos. Multer ofrece la opción de almacenar archivos en el disco, como se muestra a continuación. Aquí, configuramos un directorio donde se guardarán todos nuestros archivos, y también les daremos a los archivos un nuevo identificador.

Manejo de carga de archivos

Subiendo un solo archivo

En el archivo index.html, definimos un atributo de acción que realiza una petición POST. Ahora necesitamos crear un punto final en la aplicación Express. Abre el archivo server.js y agrega el siguiente código:

Ten en cuenta que el name (nombre, en español) del campo archivo debe ser el mismo que el argumento myFile pasado a la función upload.single.

Subiendo múltiples archivos

Cargar varios archivos con Multer es similar a cargar un solo archivo, pero con algunos cambios.

Subiendo Imágenes

En lugar de guardar las imágenes cargadas en el sistema de archivos, las almacenaremos en una base de datos MongoDB para poder recuperarlas más tarde según sea necesario. Pero primero, instalemos MongoDB.

Luego nos conectaremos a MongoDB a través del método Mongo.client y luego agregaremos la URL de MongoDB a ese método. Puedes usar un servicio en la nube como Mlab, que ofrece un plan gratuito, o simplemente usar la conexión disponible localmente.

Abre server.js y define una petición POST que permita guardar imágenes en la base de datos.

En el código anterior, primero codificamos la imagen en una cadena base64, construimos un nuevo búfer a partir de la cadena codificada en base64 y luego la guardamos en nuestra colección de base de datos en formato JSON.

Luego mostramos un mensaje de éxito y redirigimos al usuario a la página de inicio.

Recuperando imágenes almacenadas

Para recuperar las imágenes almacenadas, realizamos una búsqueda en MongoDB utilizando el método find y devolvemos un arreglo de resultados. Luego continuamos y obtenemos los atributos _id de todas las imágenes y las devolvemos al usuario.

Como ya conocemos los id's de las imágenes, podemos ver una imagen pasando su id en el navegador, como se ilustra a continuación.

Saved imageSaved imageSaved image

Conclusión

Espero que hayas encontrado útil este tutorial. La carga de archivos puede ser un tema intimidante, pero no tiene que ser difícil de implementar. Con Express y Multer, manejar multipart/form-data es fácil y directo.

Puedes encontrar el código fuente completo para el ejemplo de carga de archivos en nuestro repositorio de GitHub.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.