‫Jonas: En esta segunda parte de la carga de imágenes de
‫la gira, ahora las procesaremos todas.
‫Pero antes de comenzar
‫a hacer eso, en realidad hay algo
‫que necesito arreglar en el controlador de usuario.
‫Y en realidad en este resizeUserPhoto, y es
‫que en realidad tenemos
‫que esperar toda esta operación aquí, ¿de acuerdo?
‫Entonces, todo esto aquí realmente devolverá una promesa, y eso
‫tiene sentido, ¿verdad? Porque
‫todas estas operaciones aquí, toman algo de tiempo y,
‫por supuesto, suceden en segundo plano.
‫Por lo tanto, son código
‫asincrónico y, obviamente, no deberían bloquear el bucle de eventos.
‫Ahora, el problema aquí es
‫que ahora mismo estamos llamando a la
‫siguiente función aquí, por lo que el próximo middleware,
‫sin esperar que estas operaciones terminen aquí.
‫Y esa no es una buena idea.
‫Entonces, simplemente usemos await
‫aquí, y luego, por supuesto, async, y todas esas cosas.
‫Así que atrapa Async aquí.
‫Muy bien, salve, y eso es mucho mejor.
‫Y ahora vamos a hacer
‫algo muy similar con las imágenes de nuestra gira.
‫Así que déjame seguir adelante y copiar esto.
‫Está bien, y aunque
‫no va a ser exactamente igual, es bueno tenerlo ya aquí.
‫Entonces esta también será una función asincrónica.
‫Muy bien, ahora como antes, en caso
‫de que no haya imágenes
‫cargadas, queremos pasar directamente al siguiente middleware.
‫Entonces, si no hay ninguna solicitud. archivos, y de hecho voy a
‫ir un paso más allá, requiriendo que
‫haya tanto la portada de la imagen como
‫también las imágenes.
‫Básicamente, queremos pasar al siguiente middleware en caso de que no
‫haya ninguna solicitud. archivos. imageCover,
‫o sin solicitud. archivos. imágenes.
‫Entonces, en ese caso, el siguiente.
‫Bien, y ahora comencemos procesando la imagen
‫de portada, y luego todas las demás imágenes en un
‫bucle, básicamente.
‫Entonces otras imágenes.
‫Ahora, ¿de dónde sacamos la imagen de portada?
‫Pues recuerda como te dije que es a pedido. archivos?
‫Ya no archivar, y luego. coverImage, o
‫en realidad imageCover.
‫¿Y luego recuerdas cómo era una matriz?
‫Así que echemos un vistazo a eso una vez más.
‫Bien, entonces todo esto es pedido. files, y
‫luego de allí tomamos imageCover, y esa
‫es una matriz de un elemento.
‫Y ahora queremos el elemento número cero, y
‫luego. buffer.
‫Así que esta cosa de aspecto extraño aquí.
‫Entonces queremos cambiar su tamaño a una proporción
‫de 2/3, y el ancho será
‫de 2000 píxeles y la altura de 1333, ¿de acuerdo?
‫Y nuevamente, esa es una buena proporción de 3/2, que
‫es muy común en las imágenes.
‫A continuación, también queremos formatearlo como JPEG con un 90% de calidad y
‫luego guardarlo como un archivo.
‫Pero esta vez se trata de imágenes /
‫recorridos, y aquí definamos nuestro nombre de archivo por separado.
‫Está bien, porque de hecho lo vamos a necesitar de nuevo.
‫Entonces, imageCoverFilename, y una
‫vez más, ahora necesitamos crear un nombre de archivo único.
‫Así que ahora es un recorrido, y luego volvamos a poner
‫aquí el ID del recorrido, donde antes estaba el ID del usuario.
‫Y eso es a pedido. params, así que recuerde que
‫esta ruta siempre contendrá el
‫ID del recorrido y, por lo tanto,
‫es bajo pedido. params. identificación.
‫Luego, nuevamente la marca de tiempo, Fecha. ahora, y luego digamos
‫que esta es la imagen de portada, ¿de acuerdo?
‫Y los demás obtendrán algunos números.
‫Y luego, por supuesto. jpeg, así que usemos eso aquí.
‫Entonces imageCoverFilename.
‫De acuerdo, y ahora, como último paso, en realidad
‫necesitamos hacer posible que
‫nuestro administrador de viajes de actualización
‫elija este nombre de archivo de portada de imagen para actualizarlo
‫en el documento de viaje actual, ¿de acuerdo?
‫Así que echemos un
‫vistazo rápido a cómo se actualiza realmente el documento.
‫Y, por lo tanto, estamos usando
‫esta función de fábrica updateOne de manera muy simple.
‫Y ese simplemente actualizará todos los datos que están
‫en el cuerpo en el nuevo documento.
‫Así que solo para demostrártelo aquí mismo.
‫Entonces updateOne, toma toda la solicitud. cuerpo, ¿de acuerdo?
‫Y ahora el secreto es poner este nombre de archivo
‫de portada de imagen a pedido. cuerpo, ¿de acuerdo?
‫Así que solicítalo. cuerpo. Imagen de portada.
‫Ah, y de nuevo, se llama imageCover en
‫su lugar, debería ser igual a imageCoverFilename, ¿de acuerdo, tiene sentido?
‫Y, por supuesto, se llama imageCover
‫porque ese es el nombre que tenemos en nuestra definición de esquema.
‫Entonces, cuando esté haciendo la actualización,
‫hará coincidir este campo en el cuerpo con
‫el campo en nuestra base de datos.
‫Y de hecho podemos refactorizar esto un
‫poco porque realmente no necesitamos este nombre de variable aquí en absoluto.
‫Así que simplemente podríamos poner este nombre de archivo aquí en el cuerpo.
‫Así que pon eso aquí, y luego úsalo aquí de inmediato.
‫Entonces no necesitamos esta línea de código en absoluto.
‫Genial, y ahora, antes de pasar a las otras imágenes, probémoslo
‫con lo que ya tenemos en
‫este momento.
‫Así que vamos a deshacernos de esta consola. log, por lo
‫que cuando hagamos la solicitud,
‫nuestra imagen de portada ya debería estar
‫cargada y colocada en el documento de gira, ¿de acuerdo?
‫Entonces, estas otras tres imágenes aquí, por supuesto que no, pero al
‫menos la portada de la
‫imagen debería estar funcionando ahora en este
‫punto, al menos si hicimos todo correctamente.
‫Entonces, veamos si está en algún lugar aquí,
‫y las imágenes todavía están vacías obviamente.
‫Pero ahora estoy buscando la imagen de portada, ¿dónde está?
‫Y aquí está, imageCover, y se
‫parece mucho al nombre de archivo
‫que acabamos de especificar.
‫Y tratemos de recargar nuestra página de todos los recorridos aquí, y tal vez
‫nuestro nuevo recorrido ya esté aquí.
‫Ah, aquí vamos, así que ese es el nuevo tour de ciclistas de montaña.
‫Y esta es de hecho la imagen que acabamos de subir.
‫Tan hermoso.
‫Ahora bien, si intentamos abrir
‫esta página, entonces las otras imágenes no están aquí, ¿de acuerdo?
‫Así que no se encuentran por ninguna
‫parte y, por supuesto, eso es lo que haremos a continuación.
‫Está bien.
‫Así que recuerde que nuestras
‫imágenes aquí también son una matriz,
‫que luego contiene todas estas cargas de archivos nuevos.
‫Entonces, ahora usemos un bucle para
‫procesar cada uno de ellos en una iteración.
‫Así que solicítalo. archivos. imágenes. para cada.
‫Y luego nuestra función de
‫devolución de llamada en la que obtenemos acceso al archivo actual.
‫Muy bien, ahora aquí realmente necesitamos crear
‫el nombre de archivo actual, y verá por
‫qué en un segundo.
‫Entonces el nombre de archivo es igual, y luego algo muy similar a esto.
‫Con la diferencia de que ahora no
‫es cover, sino que queremos llamarlos uno, dos y tres.
‫Entonces, en nuestra función
‫de devolución de llamada, también obtenemos acceso al índice actual, ¿de acuerdo?
‫Entonces necesitamos el archivo y yo el índice.
‫Y aquí no es la portada, sino el índice más uno.
‫Entonces más uno, y eso es solo
‫porque este índice está basado en cero, ¿de acuerdo?
‫A continuación, viene el paso de procesamiento en sí,
‫que nuevamente es muy similar a este.
‫Y ahora, por supuesto, también debemos marcar esto como asíncrono.
‫Muy bien, y aquí abajo está ahora el nombre del archivo.
‫Bien, ahora ¿por qué realmente necesitamos este nombre de archivo?
‫Bueno, lo necesitamos porque ahora necesitamos enviar este nombre de
‫archivo a la solicitud. cuerpo. imágenes, y esa es exactamente la misma lógica que
‫teníamos aquí antes a pedido. cuerpo. imageCover.
‫Así que recuerda que en
‫nuestra colección, solicita. cuerpo. images es en realidad una matriz.
‫Y ahora tenemos que crear esa matriz e
‫iniciarla como una matriz vacía.
‫Así que solicítalo. cuerpo. images como
‫una matriz vacía, y luego en cada iteración
‫empujaremos el nombre de archivo actual
‫a esta matriz de imágenes.
‫Así que solicítalo. cuerpo. imágenes. empujar,
‫el nombre del archivo, ¿de acuerdo?
‫Y con esto casi terminamos.
‫Solo hay un pequeño problema, que es
‫el hecho de que en realidad
‫no estamos usando async await correctamente aquí en este caso, por lo
‫que en este bucle.
‫Y eso se debe a que este
‫async await aquí solo está dentro de esta función de
‫devolución de llamada del bucle foreach.
‫Y eso en realidad no evitará
‫que el código se mueva justo al lado de esta
‫línea donde luego llamamos al siguiente middleware, ¿de acuerdo?
‫Nuevamente, ahora mismo no estamos esperando nada de esto
‫aquí, nuevamente, porque esta espera asíncrona ocurre dentro de la
‫función de devolución de llamada
‫de uno de estos métodos de bucle.
‫Y nos encontramos con este tipo de problema
‫antes, pero afortunadamente hay una solución para
‫esto, porque dado que esta es una función
‫asíncrona aquí, devolverá una nueva promesa.
‫Entonces, si hacemos un
‫mapa, podemos guardar una serie de todas estas promesas.
‫Y luego, si tenemos una matriz,
‫podemos usar la promesa. todo para esperarlos a todos.
‫Y entonces, con eso, realmente esperaremos hasta
‫que todo este código, y en este caso,
‫hasta que se complete todo el procesamiento
‫de imágenes, y solo entonces pasaremos a la siguiente
‫línea, que es llamar al
‫siguiente middleware para actualizar realmente los documentos del recorrido.
‫Y si no hiciéramos eso
‫en este caso, realmente no
‫funcionaría en absoluto, porque sin este empuje aquí,
‫la solicitud. cuerpo. las imágenes aún estarían vacías
‫cuando llamemos a continuación.
‫Por lo tanto, ninguno de estos
‫nombres de imágenes se conservaría en el documento, ¿de acuerdo?
‫Así que usemos ahora la promesa. all, y
‫en realidad ni siquiera estoy guardando esta matriz aquí en ninguna variable,
‫sino que usaré la promesa. todo de inmediato
‫en esto.
‫Así que espera Promise. todo en la matriz
‫que regresa de esto, ¿de acuerdo?
‫Así que espero que tenga sentido.
‫Así que ahora registremos el cuerpo aquí en la consola.
‫Muy bien, y con esto ahora deberíamos estar listos
‫para cargar todas nuestras imágenes, ¿de acuerdo?
‫Bajemos aquí e intentemos esto de nuevo.
‫Muy bien, entonces, ¿dónde está nuestra matriz de imágenes?
‫Bueno, tal vez estaba en algún lugar aquí arriba, ah, aquí está.
‫Así que me perdí eso de alguna manera.
‫Y eso parece muy prometedor, ¿verdad?
‫Entonces, tres bonitas imágenes,
‫echemos un vistazo aquí en nuestra página.
‫Ah, ahí están, pero no del todo correctos, ¿verdad?
‫Entonces parece como si simplemente hubiéramos subido
‫la imagen de portada tres veces.
‫Entonces, echemos un vistazo a Postman, pero los
‫nombres de las imágenes son correctos,
‫por lo que hay algo mal en nuestro procesamiento allí.
‫Echemos un vistazo también a las solicitudes. cuerpo, oh, y me olvidé
‫de ponerlo aquí.
‫De acuerdo, pero creo que ni siquiera es necesario porque
‫acabamos de ver en Postman
‫que los nombres de archivo son realmente correctos.
‫Entonces ya no necesitamos este.
‫Ahora echemos un vistazo a los nombres
‫de archivo que acabamos de cargar, para que estén en público y en recorridos.
‫Y aquí están.
‫Entonces este fue probablemente el primero de la última prueba.
‫Y como puede ver, todos ellos son, de
‫hecho, la misma imagen exacta.
‫Así que la portada, uno, dos y tres son las mismas
‫imágenes, y eso no es correcto.
‫Y puedo ver de inmediato cuál es el problema.
‫Entonces ve que en realidad estamos leyendo, todavía,
‫solicitud. archivos. imageCover, y
‫no el archivo de la iteración actual de este bucle.
‫Bien, en su lugar, debería ser archivo. buffer.
‫Muy bien, sigamos adelante y
‫eliminemos todos estos.
‫Está bien, y simplemente inténtalo de nuevo ahora.
‫Así que enviemos eso.
‫Los nombres parecen ser
‫correctos, pero ahora, cuando recarguemos esto, veamos.
‫Ah, eso parece correcto.
‫Hermoso hermoso.
‫Verá que todas las imágenes están muy bien formateadas,
‫incluso esta que estaba, recuerde, en retrato
‫y ni siquiera en paisaje,
‫pero básicamente lo recortamos y todavía se ve hermoso.
‫Bien, aquí ahora podemos confirmar eso, de
‫modo que en realidad está en los 2.000 por 1.333 píxeles.
‫Muy bien, todavía es un poco grande aquí, así que tal
‫vez podríamos reducir la calidad un poco más, pero eso
‫no es realmente importante.
‫Lo que realmente importa aquí
‫es que la lógica que acabamos de aplicar aquí realmente funciona.
‫Así que para recapitular rápidamente lo que hicimos en estas dos conferencias.
‫Así que creamos una carga múltiple usando el almacenamiento de memoria
‫y este filtro solo para imágenes.
‫Luego, creamos el middleware de la imagen del
‫recorrido de carga utilizando upload. fields, que incluye una portada
‫de imagen y tres imágenes, y luego, en
‫la solicitud, pondrá la propiedad de los archivos de esta manera, ¿de acuerdo?
‫Luego, en nuestro próximo middleware, cambiamos el tamaño de estas
‫imágenes, primero la imagen
‫de portada y luego las tres imágenes restantes.
‫Y lo que es realmente importante tener en cuenta
‫aquí es cómo solicitamos los nombres de los archivos de imágenes. cuerpo.
‫Y lo hacemos para que en el
‫próximo middleware, que es el
‫controlador de ruta real, coloque esos datos en el
‫nuevo documento cuando lo actualice, ¿de acuerdo?
‫Así que hacemos eso con la portada de
‫la imagen, y también lo hacemos con las imágenes
‫restantes empujándola hacia el cuerpo. imágenes, que, como
‫sabemos por nuestro esquema de
‫recorrido, esperan una matriz de cadenas.
‫Y en este caso, los nombres de archivo.
‫Entonces, sobre estas otras imágenes,
‫las teníamos a pedido. archivos. images, por lo que
‫es una matriz y, por supuesto, lo recorremos usando map.
‫Y usamos map para que básicamente podamos guardar
‫las tres promesas que son el
‫resultado de estas tres funciones asíncronas aquí, de
‫modo que podamos esperarlas todas
‫aquí usando Promise. ¿todo bien?
‫Y solo después de eso, pasamos al
‫controlador de actualización de la gira real, ¿de acuerdo?
‫Y esta parte es realmente importante,
‫por lo que es importante que
‫solo pasemos al siguiente middleware tan pronto como esta parte
‫esté realmente completa.
‫Porque de lo contrario, solicita. cuerpo. las imágenes estarán vacías
‫y, por supuesto, nuestros nombres de archivo no se guardarán
‫en el documento de viaje actual, ¿de acuerdo?
‫Y eso realmente concluye la
‫parte de carga de imágenes o archivos de esta sección.
‫Así que espero que haya
‫sido divertido, sé que para mí fue realmente genial.
‫Así que me gusta mucho este tipo
‫de cosas, lo que hace que mis aplicaciones se sientan como en el mundo real.
‫De todos modos, espero que lo hayan disfrutado,
‫y nos vemos en el próximo.