‫Jonas: Configuremos ahora Multer según nuestras necesidades.
‫Primero dando a las imágenes un mejor nombre de archivo,
‫luego, en segundo lugar, permitiendo que solo se carguen
‫archivos de imagen en nuestro servidor.
‫Y para empezar, vamos a
‫mover todas las cosas
‫relacionadas con Multer de este enrutador al controlador.
‫Así que cortemos esto
‫aquí, y lo pondré aquí al final,
‫o en realidad en la parte superior, ¿de acuerdo?
‫Así que todo lo relacionado con
‫Multer, lo pondremos aquí en la parte superior.
‫Entonces también necesitamos, por supuesto, importar este paquete Multer.
‫Y ahora también necesitamos crear un middleware con esto.
‫Entonces exporta. uploadUserPhoto será
‫igual a esto.
‫Está bien, y todavía tenemos una función
‫de middleware, pero ahora tiene su propio nombre más fácil de usar, ¿de acuerdo?
‫Y aquí, userController. uploadPhoto, ¿de acuerdo?
‫Así que se ve mucho mejor
‫y, por supuesto, tiene
‫sentido que este código esté en el controlador.
‫Y ahora esto es agradable
‫y limpio, y de hecho podemos cerrarlo ahora.
‫Genial, y ahora vamos a
‫configurar nuestra carga de Multer según nuestras necesidades.
‫Y para eso vamos a crear un almacenamiento Multer
‫y un filtro Multer, ¿de acuerdo?
‫Y luego usaremos ese almacenamiento y el
‫filtro para luego crear la carga desde allí, ¿de acuerdo?
‫Así que hagámoslo aquí.
‫Entonces, un multerStorage, usamos multer. almacenamiento de disco.
‫Muy bien, y también podríamos optar
‫por almacenar el archivo en la memoria como un
‫búfer, para luego poder usarlo más tarde en otros procesos.
‫Y de hecho lo haremos un poco
‫más tarde, pero por ahora, por supuesto, queremos almacenar
‫el archivo tal como está en nuestro sistema de archivos, ¿de acuerdo?
‫Entonces, para el almacenamiento en disco, tomaremos un par de opciones,
‫y la primera es el destino.
‫Pero ahora no podemos simplemente establecerlo en este camino como
‫lo hicimos antes.
‫No, esto es un poco más complejo, ¿de acuerdo?
‫Y entonces, realmente, este destino aquí es una función de devolución
‫de llamada que es así.
‫Entonces, esta función de devolución de llamada tiene acceso a la solicitud actual,
‫al archivo cargado actualmente y también a
‫una función de devolución de llamada.
‫Y esta función de devolución de
‫llamada es un poco como la siguiente función en Express.
‫Pero lo llamo cb aquí, que significa devolución de llamada, por
‫lo que es un nombre diferente
‫al siguiente, porque en realidad no proviene de Express, ¿de acuerdo?
‫Pero es similar en que podemos pasar errores aquí y
‫otras cosas, como verá en un segundo.
‫Entonces, para definir ahora el
‫destino, en realidad necesitamos llamar a esa devolución de llamada.
‫Entonces, la devolución de llamada, y luego el primer argumento es un
‫error si hay uno.
‫Y si no, simplemente nulo.
‫Y el segundo argumento es entonces el destino real.
‫Copiemos eso
‫de aquí y peguemos aquí.
‫Muy bien, y nuevamente, todo esto parece un poco extraño y complejo, y echemos
‫un vistazo a
‫la documentación de Multer en GitHub.
‫Bien, y si necesita obtener
‫más información, puede echar un vistazo a esta documentación aquí.
‫Y como puede ver,
‫con 6.000 estrellas, en realidad es un paquete bastante popular.
‫Entonces aquí puedes aprender a usarlo.
‫Pero, de hecho, lo que encontrará
‫aquí es algo así como
‫lo que haremos durante las próximas conferencias, ¿de acuerdo?
‫Entonces esto parece mucho más confuso de lo
‫que vamos a hacer, ¿de acuerdo?
‫Pero ves que esto
‫es realmente lo que estamos haciendo actualmente, por lo que estamos configurando
‫el destino y, a continuación, también configuraremos el nombre del archivo.
‫Así que hagámoslo, y nuevamente, si desea obtener más información,
‫solo eche un vistazo a esa documentación.
‫Pero por ahora quiero establecer la propiedad del nombre de archivo.
‫Entonces no es eso, simplemente nombre de archivo.
‫Y nuevamente, esa es una función de devolución
‫de llamada muy similar con una firma, solicitud, archivo y devolución de llamada similares.
‫Y ahora queremos dar a nuestros archivos algunos nombres de archivo únicos.
‫Y la forma
‫en que voy a hacer eso es llamarlos user-userid, la marca de tiempo actual.
‫Entonces algo como esto: entonces usuario-, y
‫luego la ID, que es así de extraño, algo como esto.
‫Correcto, y luego la marca de
‫tiempo actual, que será un número enorme, algo como
‫esto, y luego, por supuesto, la extensión del archivo, ¿de acuerdo?
‫Y con esto básicamente podemos garantizar
‫que no habrá dos imágenes con el mismo nombre de archivo.
‫Si usamos solo el ID
‫de usuario, entonces, por supuesto, múltiples cargas
‫del mismo usuario anularían la imagen anterior.
‫Y si solo usáramos usuario con la marca de tiempo, bueno,
‫entonces si dos usuarios estuvieran cargando una imagen al mismo tiempo,
‫obtendrían exactamente el mismo nombre de archivo, lo
‫cual no tiene sentido.
‫Muy bien, primero que nada,
‫extraigamos el nombre del archivo del archivo cargado.
‫¿Y cómo lo conseguimos?
‫Bueno, echemos un vistazo a la salida de nuestra consola
‫aquí, donde tuvimos la solicitud. archivo hace mucho tiempo.
‫Así que aquí está, así que recuerde que este objeto
‫aquí fue una solicitud. archivo, y eso
‫es exactamente lo que es este archivo aquí, ¿de acuerdo?
‫Y aquí tenemos el tipo
‫MIME, y ese JPEG se almacena aquí, ¿de acuerdo?
‫Y de aquí es de donde obtendremos
‫la extensión de archivo.
‫Entonces la extensión es igual al archivo. mimetype, y luego dividamos
‫esa cadena por la barra, y tomemos el
‫segundo elemento de la matriz resultante.
‫Y entonces esa será solo esta parte, entonces solo esto.
‫Muy bien, esa es la extensión.
‫Y ahora, como antes,
‫necesitamos llamar a la función de devolución de llamada sin error, y luego
‫el nombre de archivo que queremos especificar.
‫Entonces, ese será el usuario, luego la identificación del usuario, ¿recuerdas?
‫Y como tenemos acceso a la solicitud aquí, es
‫muy simple, solicitud. usuario. identificación.
‫Y como ya sabe, esa es
‫la identificación del usuario que ha iniciado sesión actualmente.
‫Luego, la marca de tiempo, entonces Date. ahora, de acuerdo, y
‫luego puntee la extensión que acabamos de crear, ¿de acuerdo?
‫Así que eliminemos este comentario,
‫y ese es en realidad nuestro almacenamiento.
‫Y así, básicamente, una definición completa de cómo
‫queremos almacenar nuestros archivos, con
‫el destino y el nombre del archivo.
‫A continuación, creemos un filtro Multer.
‫Así que llamémoslo exactamente así.
‫Y el filtro en Multer es simplemente, nuevamente, una
‫función de devolución de llamada, similar a las que teníamos antes,
‫accediendo a la solicitud, el archivo y una función de devolución de llamada.
‫Y en esta función, el objetivo
‫es básicamente probar si el archivo subido es una imagen.
‫Y si es así, pasamos verdadero a la función de
‫devolución de llamada, y si no
‫es así, pasamos falso a la función de devolución de llamada,
‫junto con un error.
‫Porque nuevamente, no queremos permitir que se
‫carguen archivos que no sean imágenes.
‫Y eso es exactamente para lo que es este filtro.
‫Ahora, si en su
‫propia aplicación desea cargar algo más, digamos archivos CSV, cuando entonces,
‫por supuesto, puede probar eso en lugar de imágenes.
‫Entonces, todo lo que estamos haciendo
‫aquí funciona no solo
‫para imágenes, sino también para todo
‫tipo de archivos que desea cargar, ¿de acuerdo?
‫Ahora de nuevo, en este caso realmente estamos hablando de imágenes, así
‫que probemos si el archivo subido es una imagen.
‫Y para eso usaremos una vez más el tipo MIME, porque sea
‫cual sea el tipo de imagen
‫que se cargue, así que no importa si es un JPEG, PNG, o un
‫mapa de bits, o un TIFF, o
‫realmente cualquier cosa, el tipo MIME siempre comenzará con image.
‫Y ahora podemos probar eso.
‫Entonces, si file. tipo de Mimica. startsWith, image, por lo
‫que no estoy seguro de si hemos usado este antes, pero es
‫un método de cadena bastante nuevo y muy útil que está
‫disponible en JavaScript, por lo que
‫en todo JavaScript en general.
‫Entonces, en caso de que realmente tengamos una imagen, bueno,
‫entonces nuevamente no hay error y pasamos verdadero,
‫como dije al principio.
‫Pero de lo contrario, pasaremos un error y luego
‫un falso.
‫Así que pongamos una x aquí y sea falso.
‫Entonces, para esta x aquí, ahora crearemos un AppError, tal como lo
‫hemos estado haciendo todo el tiempo.
‫Y de hecho ya lo tenemos aquí.
‫Entonces, digamos
‫un nuevo AppError, no una
‫imagen, cargue solo imágenes, ¿de acuerdo?
‫Y luego un 400 por una mala solicitud.
‫Genial, tenemos nuestro almacenamiento, tenemos nuestro filtro, ahora es
‫el momento de
‫usarlos para crear la carga.
‫De acuerdo, la carga ahora no se verá
‫así, sino que pasaremos estas variables.
‫Entonces, en Multer podemos especificar el almacenamiento,
‫y ese es nuestro multerStorage.
‫Y luego el
‫fileFilter, que es la variable que llamamos multerFilter.
‫Está bien, y eso es todo.
‫Y, por supuesto, podríamos haber
‫puesto todo esto aquí directamente en este objeto de opciones aquí.
‫Pero generalmente prefiero hacer esto afuera
‫y luego simplemente pasar las variables a un objeto de opciones.
‫Entonces eso se ve un poco más limpio.
‫Así que estos son muchos pasos
‫que debemos seguir para crear realmente nuestro middleware Multer.
‫Pero finalmente, por supuesto, como
‫hicimos en el
‫último video, usamos esta carga, y en eso llamamos
‫single, con el nombre del campo.
‫Entonces foto, y luego desde allí creamos una exportación,
‫o middleware, que en realidad ya incluimos
‫en nuestro enrutador.
‫Así que eliminemos ahora este viejo tipo de imagen
‫que teníamos aquí antes.
‫No, eso no funcionó.
‫Y ahora probémoslo aquí de nuevo.
‫De vuelta en Postman, todavía tenemos nuestro nombre aquí
‫y la imagen de Leo, así que vamos.
‫Y no obtuvimos ningún error, lo cual es bueno.
‫Y veamos nuestra salida aquí nuevamente.
‫Así que todo aquí al principio es
‫igual, pero luego ves que nuestro nombre de archivo ahora es correcto.
‫Y si echa un vistazo a nuestra
‫carpeta, entonces está nuestra imagen.
‫Y ese es exactamente el que subimos.
‫Eso está en dev-data, imágenes, Leo.
‫Y de hecho, eso es exactamente lo mismo.
‫Genial, eso es asombroso.
‫Ahora, solo para probar este filtro
‫aquí también, intentemos cargar algún otro archivo que no sea una imagen.
‫Entonces, seleccionemos algo más aquí de nuestros datos de
‫desarrollo, y digamos simplemente algunos datos JSON.
‫Entonces, esperemos si obtenemos un error aquí.
‫Y de hecho obtenemos uno.
‫Así que no es una imagen, cargue solo imágenes.
‫Y entonces significa que eso también funciona.
‫Tan perfecto, toda nuestra configuración Multer ahora funciona
‫realmente bien, pero por supuesto
‫todavía falta un paso.
‫Y eso es realmente vincular
‫al usuario a la imagen recién actualizada, ¿verdad?
‫Porque en este momento en la
‫base de datos, obviamente todavía
‫tenemos la ruta, o en realidad el nombre
‫de la imagen anterior, porque en ninguna parte
‫de nuestro código especificamos que queríamos actualizar el documento del usuario, ¿verdad?
‫Y arreglemos eso en el siguiente video.