Hay tres formas principales de manejar las cargas de archivos en Node.js: guardar las imágenes directamente en su servidor, guardar las imágenes datos binarios o datos de cadena base64 a su base de datos, y usar depósitos S3 de Amazon Web Service (AWS) para guardar y administrar su imágenes
Aquí aprenderá a usar Multer, un middleware de Node.js, para cargar y guardar imágenes directamente en su servidor en aplicaciones de Node.js en unos pocos pasos.
Paso 1: Configuración del entorno de desarrollo
El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT.
Primero, cree una carpeta de proyecto y muévase a ella ejecutando el siguiente comando:
mkdir multer-tutorial
cd multer-tutorial
A continuación, inicialice npm en el directorio de su proyecto ejecutando:
npm inicializar -y
A continuación, deberá instalar algunas dependencias. Las dependencias requeridas para este tutorial incluyen:
- Expresar: Express es un marco Node.js que proporciona un conjunto sólido de funciones para aplicaciones web y móviles. Facilita la creación de aplicaciones de back-end con Node.js.
- Multar: Multer es un middleware rápido que simplifica la carga y el guardado de imágenes en su servidor.
Instalar los paquetes con el administrador de paquetes del nodo mediante la ejecución:
npm instalar exprés multer
A continuación, cree un aplicación.js archivo en el directorio raíz de su proyecto y agregue el bloque de código a continuación para crear un servidor Express básico:
//app.js
constante expresar = requerir('expresar');
constante aplicación = expreso();
constante puerto = proceso.env. PUERTO || 3000;
app.listen (puerto, ()=>{
consola.registro(`La aplicación está escuchando en el puerto ${puerto}`);
});
Paso 2: Configuración de Multer
Primero, importa multrar en tus aplicación.js archivo.
constante multrar = requerir("multar");
multrar requiere un motor de almacenamiento que contenga información sobre el directorio donde se almacenarán los archivos cargados y cómo se nombrarán los archivos.
A multrar El motor de almacenamiento se crea llamando al almacenamiento de disco método en el importado multrar módulo. Este método devuelve un Motor de almacenamiento implementación configurada para almacenar archivos en el sistema de archivos local.
Toma un objeto de configuración con dos propiedades: destino, que es una cadena o función que especifica dónde se almacenarán las imágenes cargadas.
La segunda propiedad, Nombre del archivo, es una función que determina los nombres de los archivos cargados. Toma tres parámetros: requerimiento, archivo, y una devolución de llamada (cb). requerimiento es el expreso Pedido objeto, archivo es un objeto que contiene información sobre el archivo procesado, y cb es una devolución de llamada que determina los nombres de los archivos cargados. La función de devolución de llamada toma error y nombre de archivo como argumentos.
Agregue el bloque de código a continuación a su aplicación.js archivo para crear un motor de almacenamiento:
//Configuración del motor de almacenamiento
constante motordealmacenamiento = multer.diskStorage({
destino: "./imágenes",
nombre de archivo: (requerido, archivo, cb) => {
cb(nulo, `${Fecha.ahora()}--${archivo.nombreoriginal}`);
},
});
En el bloque de código anterior, establece el destino propiedad a”./imágenes”, por lo tanto, las imágenes se almacenarán en el directorio de su proyecto en un imágenes carpeta. Luego, en la devolución de llamada, pasaste nulo como el error y una cadena de plantilla como el nombre del archivo. La cadena de plantilla consta de una marca de tiempo generada al llamar Fecha.ahora() para garantizar que los nombres de las imágenes sean siempre únicos, dos guiones para separar el nombre del archivo y la marca de tiempo, y el nombre original del archivo, al que se puede acceder desde el archivo objeto.
Las cadenas resultantes de esta plantilla se verán así: 1663080276614--ejemplo.jpg.
A continuación, debe inicializar multrar con el motor de almacenamiento.
Agregue el bloque de código a continuación a su aplicación.js archivo para inicializar multer con el motor de almacenamiento:
// inicializando multer
constante cargar = multer ({
almacenamiento: motor de almacenamiento,
});
multrar devuelve una instancia de Multer que proporciona varios métodos para generar middleware que procesa los archivos cargados en multiparte/datos de formulario formato.
En el bloque de código anterior, pasa un objeto de configuración con un almacenamiento propiedad establecida en motor de almacenamiento, que es el motor de almacenamiento que creó anteriormente.
Actualmente, su configuración de Multer está completa, pero no hay reglas de validación que aseguren que solo se pueden guardar imágenes en su servidor.
Paso 3: agregar reglas de validación de imágenes
La primera regla de validación que puede agregar es el tamaño máximo permitido para que una imagen se cargue en su aplicación.
Actualice su objeto de configuración de multer con el siguiente bloque de código:
constante cargar = multer ({
almacenamiento: motor de almacenamiento,
limites: { tamaño del archivo: 1000000 },
});
En el bloque de código anterior, agregó un limites propiedad al objeto de configuración. Esta propiedad es un objeto que especifica varios límites en los datos entrantes. Tu configuraste el tamaño del archivo propiedad, con la que el tamaño máximo de archivo en bytes se establece en 1000000, que equivale a 1 MB.
Otra regla de validación que puede agregar es la archivofiltro property, una función opcional para controlar qué archivos se cargan. Esta función se llama para cada archivo que se procesa. Esta función toma los mismos parámetros que la Nombre del archivo función: requerimiento, archivo, y cb.
Para que su código sea más limpio y reutilizable, abstraerá toda la lógica de filtrado en una función.
Agregue el bloque de código a continuación a su aplicación.js file para implementar la lógica de filtrado de archivos:
constante camino = requerir("camino");
constante comprobar tipo de archivo = función (archivo, cb) {
//Extensiones de archivo permitidas
constante tipos de archivo = /jpeg|jpg|png|gif|svg/;
//controlar extensión nombres
constante extName = fileTypes.test (ruta.extname (archivo.originalname).toLowerCase());
constante mimeType = fileTypes.test (archivo.mimetype);
si (mimeTipo && extNombre) {
devolver cb(nulo, verdadero);
} demás {
cb("Error: ¡Solo puedes subir imágenes!");
}
};
El comprobar tipo de archivo La función toma dos parámetros: archivo y cb.
En el bloque de código anterior, definió un tipos de archivo variable que almacena una expresión regular con las extensiones de archivo de imagen permitidas. A continuación, llamó al prueba método en la expresión regular.
El prueba El método busca una coincidencia en la cadena pasada y devuelve verdadero o FALSO dependiendo de si encuentra una coincidencia. Luego, pasa el nombre del archivo cargado, al que puede acceder a través de archivo.nombreoriginal, en el módulo de la ruta extname método, que le devuelve la extensión de la ruta de la cadena. Finalmente, encadenas el JavaScript aLowerCase función de cadena a la expresión para manejar imágenes con sus nombres de extensión en mayúsculas.
Verificar el nombre de la extensión por sí solo no es suficiente, ya que los nombres de las extensiones se pueden editar fácilmente. Para asegurarse de que solo se carguen imágenes, debe verificar la Tipo de Mimica también. Puede acceder a un archivo tipo de Mimica propiedad a través de la archivo.mimetype. Por lo tanto, comprueba la tipo de Mimica propiedad usando el prueba como lo hizo con los nombres de las extensiones.
Si las dos condiciones se vuelven verdaderas, devuelve la devolución de llamada con nulo y verdadero, o devuelve la devolución de llamada con un error.
Finalmente, agregas el archivofiltro propiedad a su configuración de multer.
constante cargar = multer ({
almacenamiento: motor de almacenamiento,
limites: { tamaño del archivo: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (archivo, cb);
},
});
Paso 4: Uso de Multer como Middleware Express
A continuación, debe implementar controladores de ruta que manejarán las cargas de imágenes.
Multer puede manejar cargas de imágenes individuales y múltiples según la configuración.
Agregue el bloque de código a continuación a su aplicación.js archivo para crear un controlador de ruta para cargas de una sola imagen:
aplicación.post("/single", cargar.único("imagen"), (requerido, res) => {
si (requerimiento.archivo) {
res.enviar("Archivo único subido con éxito");
} demás {
res.estado (400).send("Sube una imagen válida");
}
});
En el bloque de código anterior, llamaste al soltero método en el subir variable, que almacena su configuración de multer. Este método devuelve un middleware que procesa un "archivo único" asociado con el campo de formulario dado. Entonces, pasaste el imagen como campo de formulario.
Finalmente, verifique si un archivo se cargó a través del requerimiento objeto en el archivo propiedad. Si lo fue, envía un mensaje de éxito, de lo contrario, envía un mensaje de error.
Agregue el bloque de código a continuación a su aplicación.js archivo para crear un controlador de ruta para múltiples cargas de imágenes:
aplicación.post("/multiple", subir.matriz("imágenes", 5), (req, res) => {
si (requerimiento.archivos) {
res.enviar("Múltiples archivos cargados con éxito");
} demás {
res.estado (400).send("Sube imágenes válidas");
}
});
En el bloque de código anterior, llamaste al formación método en el subir variable, que almacena su configuración de multer. Este método toma dos argumentos, un nombre de campo y un recuento máximo, y devuelve un software intermedio que procesa varios archivos que comparten el mismo nombre de campo. Entonces, pasaste imágenes como el campo de formulario compartido y 5 como el número máximo de imágenes que se pueden cargar a la vez.
Ventajas de usar Multer
El uso de Multer en sus aplicaciones Node.js simplifica el complicado proceso de cargar y guardar imágenes directamente en su servidor. Multer también se basa en busboy, un módulo de Node.js para analizar datos de formularios entrantes, lo que lo hace muy eficiente para analizar datos de formularios.