Subir archivos con Multer en Node.js y Express

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.

1	mkdir upload-express
2	cd upload-express
3	npm init

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

1	npm install express multer body-parser --save

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

1	touch 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.

// call all the required packages
const express = require('express')
const bodyParser= require('body-parser')
const multer = require('multer');
app.use(bodyParser.urlencoded({extended: true}))

const app = express()

//CREATE EXPRESS APP
const app = express();

//ROUTES WILL GO HERE
app.get('/', function(req, res) {
    res.json({ message: 'WELCOME' });   
});

app.listen(3000, () => console.log('Server started on port 3000'));

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

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.

1	touch index.html

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MY APP</title>
</head>
<body>
  

 <!--  SINGLE FILE -->
<form action="/uploadfile" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="myFile" />
   <input type="submit" value="Upload a file"/>
</form>


<!-- MULTIPLE FILES -->

<form action="/uploadmultiple"  enctype="multipart/form-data" method="POST">
  Select images: <input type="file" name="myFiles" multiple>
  <input type="submit" value="Upload your files"/>
</form>

  <!--   PHOTO-->

<form action="/upload/photo" enctype="multipart/form-data" method="POST"> 
  <input type="file" name="myImage" accept="image/*" />
  <input type="submit" value="Upload Photo"/>
</form>



</body>
</html>


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

// ROUTES
app.get('/',function(req,res){
  res.sendFile(__dirname + '/index.html');

});

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.

//server.js


// SET STORAGE
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

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:

app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
  const file = req.file
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
    res.send(file)
 
})

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.

//Uploading multiple files
app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, next) => {
  const files = req.files
  if (!files) {
    const error = new Error('Please choose files')
    error.httpStatusCode = 400
    return next(error)
  }

    res.send(files)
 
})

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.

1	npm install mongodb --save

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.

const MongoClient = require('mongodb').MongoClient
const myurl = 'mongodb://localhost:27017';

MongoClient.connect(myurl, (err, client) => {
  if (err) return console.log(err)
  db = client.db('test') 
  app.listen(3000, () => {
    console.log('listening on 3000')
  })
})

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

app.post('/uploadphoto', upload.single('picture'), (req, res) => {
    var img = fs.readFileSync(req.file.path);
 var encode_image = img.toString('base64');
 // Define a JSONobject for the image attributes for saving to database
 
 var finalImg = {
      contentType: req.file.mimetype,
      image:  new Buffer(encode_image, 'base64')
   };
db.collection('quotes').insertOne(finalImg, (err, result) => {
  	console.log(result)

    if (err) return console.log(err)

    console.log('saved to database')
    res.redirect('/')
  
    
  })
})

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.

app.get('/photos', (req, res) => {
db.collection('mycollection').find().toArray((err, result) => {

      const imgArray= result.map(element => element._id);
			console.log(imgArray);

   if (err) return console.log(err)
   res.send(imgArray)

  })
});

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.

app.get('/photo/:id', (req, res) => {
var filename = req.params.id;

db.collection('mycollection').findOne({'_id': ObjectId(filename) }, (err, result) => {

    if (err) return console.log(err)

   res.contentType('image/jpeg');
   res.send(result.image.buffer)
  
   
  })
})

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.