Guías de Make it Real
Search…
Cargar imágenes
Express.js no permite cargar archivos directamente, así que necesitamos usar una librería llamada multer.
Como siempre, el primer paso es agregar la librería:
1
$ yarn add multer
Copied!
El siguiente paso es configurar la librería en nuestro código:
1
const express = require('express');
2
const multer = require('multer');
3
const upload = multer({ dest: 'uploads/' });
4
5
const app = express();
6
7
app.post('/profile', upload.single('avatar'), (req, res) => {
8
// req.file es el archivo 'avatar', el nombre original se puede obtener
9
// con req.file.originalname
10
});
11
12
...
Copied!
En la línea 3 estamos configurando multer para que las imágenes queden almacenadas en la carpeta
uploads. En la línea 7 estamos creando la ruta /profile y como segundo parámetro le estamos pasando el middleware de multer que va a recibir la imagen del formulario y guardarla en la carpeta uploads.El formulario sería el siguiente:
1
<form action="/profile" method="post" enctype="multipart/form-data">
2
<input type="file" name="avatar">
3
<input type="submit" value="Enviar">
4
</form>
Copied!
En la primera línea estamos definiendo la ruta
/profile con el método POST. También definimos un formato llamado multipart/form-data, que nos permite enviar uno o más archivos junto a otra información del formulario. Sin esta última opción la carga de archivos no funcionaría.En la segunda línea estamos definiendo el campo de tipo archivo que se va a utilizar para cargar la imagen.
Validaciones
Para validar que sólo puedan cargar imágenes podemos agregarle una opción a la configuración de multer:
1
...
2
const upload = multer({
3
dest: 'uploads/',
4
fileFilter(req, file, next) {
5
const isPhoto = file.mimetype.startsWith('image/');
6
if (isPhoto) {
7
next(null, true);
8
} else {
9
next({ message: "El tipo de archivo no es válido" }, false);
10
}
11
}
12
});
Copied!
También es conveniente agregar la siguiente validación al campo de tipo archivo:
1
<input type="file" name="avatar" accept="image/gif, image/png, image/jpeg">
Copied!
De esa forma el usuario no va a poder seleccionar archivos que no sean imágenes en el formulario. Sin embargo, la validación en el servidor es necesaria porque alguien podría modificar el formulario y enviar otro tipo de archivos.
También es posible limitar el tamaño del archivo con la opción
fileSize, que recibe el número máximo de bytes que puede tener el archivo:1
const upload = multer({
2
...,
3
fileSize: 1000000 // 1MB
4
});
Copied!
Colisiones de nombres
Si dos usuarios suben imágenes con el mismo nombre la primera imagen se va a sobrescribir. Para evitar ese problema es buena práctica generar nombre de archivos únicos con un paquete llamado uuid.
El primer paso es agregar la librería:
1
$ yarn add uuid
Copied!
Ahora debemos modificar el código para cambiar el nombre de las imágenes:
1
const express = require('express');
2
const multer = require('multer');
3
const path = require("path");
4
const uuid = require("uuid");
5
6
const app = express();
7
8
const storage = multer.diskStorage({
9
destination(req, file, cb) {
10
cb(null, 'uploads/');
11
},
12
filename(req, file, cb) {
13
cb(null, uuid.v4() + path.extname(file.originalname));
14
}
15
});
16
const upload = multer({
17
storage: storage
18
});
19
20
app.post('/profile', upload.single('avatar'), function (req, res, next) {
21
// ...
22
});
Copied!
En la línea 8 estamos definiendo el tipo de almacenamiento que vamos a utilizar para las imágenes, en este caso una carpeta en el disco duro, y definimos dos métodos:
destination y filename. destination se utiliza para definir el nombre de la carpeta, y filename para definir el nombre del archivo, ahí es donde utilizamos la librería uuid para generar un nombre único.Cargar múltiples imágenes
Hasta ahora hemos visto cómo cargar una única imagen. Sin embargo multer también permite cargar varias imágenes a la vez.
1
app.post('/profile', upload.array('photos'), (req, res) => {
2
// las imágenes están en req.files (es un arreglo)
3
});
Copied!
Modificar el tamaño de las imágenes
No es buena idea utilizar las imágenes originales que suben los usuarios porque podrían ser muy pesadas. Es mejor modificar su tamaño para garantizar que no pesen más de lo necesario.
Para eso vamos a utilizar una librería llamada Jimp que nos va a permitir redimensionar las imágenes.
El primer paso es agregar la librería:
1
$ yarn add jimp
Copied!
Ahora debemos configurar Jimp en nuestro código:
1
const express = require('express');
2
const multer = require('multer');
3
4
const app = express();
5
6
const uploader = multer(...);
7
8
// este es el middleware que va a redimensionar la imagen
9
const resize = async (req, res, next) => {
10
if (!req.file) {
11
next();
12
return;
13
}
14
15
const photo = await jimp.read(req.file.path);
16
await photo.resize(1024, jimp.AUTO);
17
await photo.write(`uploads/big/${req.file.filename}`);
18
19
next();
20
};
21
22
// debemos configurar el middleware en la ruta
23
app.post('/profile', uploader.single('avatar'), resize, (req, res) => {
24
// req.file es el archivo 'avatar', el nombre original se puede obtener
25
// con req.file.originalname
26
});
Copied!
Fíjate cómo estamos definiendo el método
resize, que realmente es un middleware que vamos a configurar en la ruta POST /profile que recibe la imagen. Ese método lee el archivo, lo redimensiona y guarda en la carpeta uploads/big/. Para ver todas las opciones de Jimp consulta la documentación.Last modified 4yr ago