‫Jonas : Dans cette deuxième partie du téléchargement des images de la
‫tournée, nous allons maintenant toutes les traiter.
‫Mais avant de commencer,
‫il y a en fait quelque chose
‫que je dois corriger dans le contrôleur utilisateur.
‫Et donc en fait dans ce resizeUserPhoto, et
‫c'est que nous devons
‫en fait attendre toute cette opération ici, d'accord ?
‫Donc, tout cela ici retournera en fait une promesse, et cela a
‫du sens, n'est-ce pas, parce
‫que toutes ces opérations ici, elles prennent un certain temps, et
‫donc bien sûr elles se produisent en arrière-plan.
‫Ce sont donc du code asynchrone,
‫et donc évidemment ils ne doivent pas bloquer la boucle d'événement.
‫Maintenant, le problème ici est
‫qu'en ce moment nous appelons cette fonction
‫suivante ici, donc le prochain middleware, sans réellement
‫attendre que ces opérations ici se terminent.
‫Et ce n'est pas une bonne idée.
‫Et donc utilisons simplement
‫wait ici, puis bien sûr async, et tout ça.
‫Alors catchAsync ici.
‫Très bien, faites une sauvegarde, et c'est bien mieux.
‫Et maintenant, nous allons faire quelque
‫chose de très similaire avec nos images de tournée.
‫Et donc en fait, permettez-moi d'aller de l'avant et de copier ceci.
‫D'accord, et même si ce
‫ne sera pas exactement la même chose, c'est bien de l'avoir déjà ici.
‫Donc celui-ci sera également une fonction asynchrone.
‫Très bien, maintenant comme avant, au cas où
‫il n'y aurait pas d'images téléchargées,
‫alors nous voulons passer directement au middleware suivant.
‫Donc s'il n'y a pas de demande. fichiers, et en fait, je vais
‫aller plus loin, en exigeant qu'il y
‫ait à la fois la couverture de l'image
‫et des images.
‫Et donc, en gros, nous voulons passer au middleware suivant au cas où il
‫n'y aurait pas de demande. des dossiers. imageCover,
‫ou pas de demande. des dossiers. images.
‫Alors dans ce cas, la suite.
‫D'accord, et maintenant commençons par traiter l'image
‫de couverture, puis ensuite toutes les autres images en boucle,
‫en gros.
‫Donc d'autres images.
‫Maintenant, où obtenons-nous réellement l'image de couverture ?
‫Eh bien, rappelez-vous comment j'ai dit que c'est à la demande. des dossiers?
‫Ne plus déposer, puis . coverImage, ou
‫en fait imageCover.
‫Et puis rappelez-vous comment c'était un tableau?
‫Jetons donc un coup d'œil à cela une fois de plus.
‫D'accord, donc tout cela est une demande. fichiers, puis
‫à partir de là, nous prenons imageCover,
‫et c'est un tableau d'un élément.
‫Et maintenant, nous voulons le numéro d'élément zéro,
‫puis . amortir.
‫Donc, cette chose étrange ici.
‫Ensuite, nous voulons le redimensionner à un rapport de
‫2/3, et la largeur sera de
‫2 000 pixels et la hauteur de 1 333, d'accord ?
‫Et encore une fois, c'est un joli rapport 3/2, ce
‫qui est très courant dans les images.
‫Ensuite, nous souhaitons également le formater au format JPEG avec une qualité de 90 %,
‫puis l'enregistrer en tant que fichier.
‫Mais cette fois, il s'agit d'image/tours, et
‫ici, définissons en fait notre nom de fichier séparément.
‫D'accord, parce que nous en aurons encore besoin.
‫Donc imageCoverFilename, et une fois
‫de plus, nous devons maintenant créer un nom de fichier unique.
‫Alors maintenant, c'est la tournée, puis mettons à nouveau l'ID
‫de la tournée ici, là où avant c'était l'ID de l'utilisateur.
‫Et c'est donc à la demande. params, alors n'oubliez pas
‫que cet itinéraire contiendra
‫toujours l'ID du tour, et donc
‫c'est sur demande. paramètres. identifiant.
‫Puis à nouveau l'horodatage, Date. maintenant, et disons que
‫celle-ci est l'image de couverture, d'accord ?
‫Et les autres obtiendront alors des chiffres.
‫Et puis bien sûr. jpeg, et utilisons-le donc ici.
‫Donc imageCoverFilename.
‫D'accord, et maintenant, comme dernière étape, nous devons en fait
‫permettre à notre gestionnaire de
‫tournée de mise à jour de
‫récupérer ce nom de fichier de couverture d'image pour le mettre à
‫jour dans le document de tournée actuel, d'accord ?
‫Voyons donc rapidement
‫comment le document est réellement mis à jour.
‫Et donc nous utilisons
‫très simplement cette fonction d'usine updateOne.
‫Et celui-ci mettra simplement à jour toutes les données
‫contenues dans le corps du nouveau document.
‫Alors juste pour vous le prouver ici.
‫Donc updateOne, il prend en charge l'intégralité de la demande. corps, d'accord ?
‫Et maintenant, le secret est de mettre ce nom de
‫fichier de couverture d'image sur demande. corps, d'accord ?
‫Alors demande. corps. Image de couverture.
‫Oh et encore, ça s'appelle imageCover à la
‫place, devrait être égal à imageCoverFilename, d'accord, ça a du sens ?
‫Et bien sûr, il s'appelle imageCover
‫car c'est le nom que nous avons dans notre définition de schéma.
‫Et alors, quand il fera la mise
‫à jour, il fera correspondre ce champ dans le corps
‫avec le champ dans notre base de données.
‫Et en fait, nous pouvons refactoriser cela
‫un peu car nous n'avons pas vraiment besoin de ce nom de variable ici.
‫Nous pourrions donc simplement mettre ce nom de fichier ici directement sur le corps.
‫Alors mettez-le ici, puis utilisez-le ici tout de suite.
‫Nous n'avons donc pas du tout besoin de cette ligne de code.
‫Super, et maintenant avant de passer aux autres images, testons-le avec
‫ce que nous avons déjà à
‫ce stade.
‫Alors débarrassons-nous simplement de cette console. log, et donc
‫quand nous faisons maintenant la demande,
‫alors notre image de couverture devrait déjà être téléchargée
‫et être placée dans le document de la tournée, d'accord ?
‫Donc, ces trois autres images ici bien sûr non, mais au
‫moins la couverture de l'image
‫devrait maintenant fonctionner à ce stade, du
‫moins si nous avons tout fait correctement.
‫Voyons donc si c'est quelque part ici, et
‫les images sont toujours vides évidemment.
‫Mais je cherche maintenant l'image de couverture, alors où est-elle ?
‫Et voilà, donc imageCover, et ça ressemble
‫beaucoup au nom de fichier que
‫nous venons de spécifier.
‫Et essayons en fait de recharger notre page de toutes les tournées ici, et peut-être
‫que notre nouvelle tournée est déjà là.
‫Ah, c'est parti, c'est donc le nouveau tour de VTT.
‫Et voici bien l'image que nous venons de mettre en ligne.
‫Si beau.
‫Maintenant, si nous essayons d'ouvrir
‫cette page, alors les autres images ne sont pas là, d'accord ?
‫Donc, ils sont introuvables, et
‫bien sûr, c'est ce que nous allons faire ensuite.
‫Très bien.
‫N'oubliez donc pas que nos
‫images ici sont également un tableau,
‫qui contient ensuite tous ces nouveaux téléchargements de fichiers.
‫Et donc, utilisons maintenant une boucle
‫pour traiter chacun d'eux en une seule itération.
‫Alors demande. des dossiers. images. pour chaque.
‫Et puis notre fonction
‫de rappel dans laquelle nous avons accès au fichier actuel.
‫Très bien, maintenant, nous devons créer le
‫nom de fichier actuel, et vous verrez pourquoi
‫dans une seconde.
‫Donc, le nom du fichier est égal, puis quelque chose de très similaire à celui-ci.
‫Avec la différence que maintenant ce n'est pas une
‫couverture, mais à la place nous voulons les appeler un, deux et trois.
‫Et donc, dans notre
‫fonction de rappel, nous avons également accès à l'index actuel, d'accord ?
‫Nous avons donc besoin du fichier, et moi de l'index.
‫Et donc ici il ne s'agit pas de couverture, mais d'indice plus un.
‫Donc plus un, et c'est juste parce
‫que cet indice est basé sur zéro, d'accord ?
‫Vient ensuite l'étape de traitement elle-même, qui est
‫à nouveau très similaire à celle-ci.
‫Et maintenant, nous devons bien sûr également marquer cela comme asynchrone.
‫Très bien, et ici c'est maintenant le nom du fichier.
‫D'accord, maintenant pourquoi avons-nous réellement besoin de ce nom de fichier ?
‫Eh bien, nous en avons besoin car nous devons maintenant pousser ce nom
‫de fichier dans la requête. corps. images, et c'est donc exactement la même logique que
‫nous avions ici avant sur demande. corps. imageCouverture.
‫Alors n'oubliez pas que dans
‫notre collection, demandez. corps. images est en fait un tableau.
‫Et maintenant, nous devons créer ce tableau et le démarrer
‫en tant que tableau vide.
‫Alors demande. corps. images sous
‫forme de tableau vide, puis à chaque itération,
‫nous pousserons le nom de fichier
‫actuel vers ce tableau d'images.
‫Alors demande. corps. images. push,
‫le nom du fichier, d'accord ?
‫Et avec cela, nous avons presque terminé.
‫Il y a juste un petit
‫problème, qui est le fait
‫que nous n'utilisons pas correctement l'attente asynchrone ici dans ce cas,
‫donc dans cette boucle.
‫Et c'est parce que cette attente asynchrone
‫ici n'est qu'à l'intérieur de cette fonction de
‫rappel de la boucle foreach.
‫Et donc cela n'empêchera pas le
‫code de se déplacer juste à côté de cette ligne
‫où nous appelons ensuite le prochain middleware, d'accord ?
‫Donc, encore une fois, pour le moment, nous n'attendons en fait
‫rien de tout cela ici, encore une fois, car cette attente asynchrone se
‫produit à l'intérieur de la fonction
‫de rappel de l'une de ces méthodes de boucle.
‫Et nous avons déjà rencontré ce genre de
‫problème auparavant, mais il existe heureusement une solution
‫pour cela, car puisqu'il s'agit d'une fonction asynchrone
‫ici, elle renverra une nouvelle promesse.
‫Et donc, si nous créons une
‫carte, nous pouvons alors enregistrer un tableau de toutes ces promesses.
‫Et puis si nous avons un
‫tableau, nous pouvons utiliser promise. tous pour les attendre tous.
‫Et donc avec cela, nous attendrons alors jusqu'à
‫ce que tout ce code, et dans ce
‫cas, jusqu'à ce que tout ce traitement
‫d'image soit terminé, et ensuite seulement passer à la ligne
‫suivante, qui appelle le prochain middleware
‫pour vraiment mettre à jour les documents de tournée.
‫Et si on ne faisait pas
‫ça dans ce cas, ça ne
‫fonctionnerait vraiment pas du tout, car sans ça pousse
‫ici, la demande. corps. les images seraient toujours vides
‫lors de l'appel suivant.
‫Et donc, aucun de ces noms
‫d'image ne serait alors conservé dans le document, d'accord ?
‫Alors utilisons maintenant la promesse. all, et
‫en fait, je n'enregistre même pas ce tableau ici dans une
‫variable, j'utiliserai plutôt promise. tout de suite
‫là-dessus.
‫Attendez donc Promesse. tout sur le tableau
‫qui en revient, d'accord ?
‫J'espère donc que cela a du sens.
‫Alors maintenant, enregistrons le corps ici sur la console.
‫D'accord, et avec ça, nous devrions maintenant être prêts
‫à télécharger toutes nos images, d'accord ?
‫Descendons ici et réessayez.
‫D'accord, alors où est notre tableau d'images ?
‫Eh bien, peut-être que c'était quelque part ici, ah, le voici.
‫Donc j'ai raté ça d'une manière ou d'une autre.
‫Et cela semble très prometteur, non?
‫Alors trois belles images,
‫regardons maintenant ici notre page.
‫Ah, ils sont là, mais pas tout à fait corrects, non ?
‫Il semble donc que nous ayons simplement
‫téléchargé l'image de couverture trois fois.
‫Jetons donc un coup d'œil à Postman, mais les noms
‫des images sont en fait corrects, et il
‫y a donc quelque chose qui ne va pas dans notre traitement là-bas.
‫Jetons également un œil aux demandes. corps, oh, et j'ai oublié
‫de le mettre ici.
‫D'accord, mais je pense que ce n'est même pas nécessaire car
‫nous venons de voir dans Postman
‫que les noms de fichiers sont en fait corrects.
‫Nous n'avons donc plus besoin de celui-ci.
‫Jetons maintenant un coup d'œil aux noms
‫de fichiers que nous venons de télécharger, donc c'est en public et en tournée.
‫Et donc les voici.
‫C'était donc probablement le premier du dernier test.
‫Et comme vous le voyez, ils sont tous, en
‫effet, exactement la même image.
‫Donc la couverture, une, deux et trois sont les mêmes images,
‫et ce n'est donc pas correct.
‫Et je peux voir en fait tout de suite quel est le problème.
‫Donc, vous voyez que nous lisons, toujours, la
‫demande. des dossiers. imageCover, et
‫non le fichier de l'itération actuelle de cette boucle.
‫D'accord, à la place, cela devrait être un fichier. amortir.
‫Très bien, alors allons-y et
‫supprimons tout cela.
‫Très bien, et réessayez simplement maintenant.
‫Alors envoyons ça.
‫Les noms semblent toujours corrects,
‫mais maintenant, lorsque nous rechargerons cela, voyons voir.
‫Ah, ça a l'air correct.
‫Beau, beau.
‫Vous voyez que les images sont toutes bien formatées,
‫même celle-ci qui était, rappelez-vous, en portrait
‫et même pas en paysage, mais
‫nous avons essentiellement recadré cela et c'est toujours aussi beau.
‫D'accord, nous pouvons maintenant confirmer cela, de sorte
‫que c'est en fait dans les 2 000 par 1 333 pixels.
‫D'accord, c'est encore un peu gros ici, alors peut-être que
‫nous pourrions réduire un peu plus la qualité, mais ce
‫n'est pas vraiment important.
‫Ce qui compte vraiment ici,
‫c'est que la logique que nous venons d'appliquer ici fonctionne vraiment.
‫Alors juste pour récapituler rapidement ce que nous avons fait dans ces deux conférences.
‫Nous avons donc créé un multer upload en utilisant la mémoire de stockage
‫et ce filtre uniquement pour les images.
‫Ensuite, nous avons créé le middleware d'image de tournée
‫de téléchargement en utilisant upload. champs, qui comprend une
‫couverture d'image et trois images, puis sur la
‫demande, il mettra la propriété de fichiers comme celle-ci, d'accord ?
‫Ensuite, dans notre prochain middleware, nous redimensionnons ces images,
‫et d'abord l'image
‫de couverture, puis les trois images restantes.
‫Et ce qui est vraiment important à noter ici,
‫c'est comment nous mettons les noms de fichiers d'images sur demande. corps.
‫Et nous faisons cela pour que dans le
‫prochain middleware, qui est le gestionnaire
‫de route réel, il place ensuite ces données sur le
‫nouveau document lorsqu'il le met à jour, d'accord ?
‫Nous faisons donc cela avec la couverture de
‫l'image, et nous le faisons également avec les images restantes
‫en la poussant dans le corps. images, qui, comme
‫nous le savons grâce à notre schéma
‫de visite, attend un tableau de chaînes.
‫Et donc dans ce cas, les noms de fichiers.
‫Donc à propos de ces autres images,
‫nous les avions sur demande. des dossiers. images, c'est donc un
‫tableau, et donc bien sûr, nous le parcourons en utilisant map.
‫Et nous utilisons map afin que nous puissions essentiellement
‫enregistrer les trois promesses qui sont le
‫résultat de ces trois fonctions asynchrones ici, afin que
‫nous puissions ensuite les attendre toutes ici
‫en utilisant Promise. tout va bien?
‫Et seulement après cela, nous passons au
‫gestionnaire de mise à jour de la tournée, d'accord ?
‫Et cette partie est vraiment importante,
‫il est donc important que nous ne
‫passions au middleware suivant que dès que cette partie ici
‫est vraiment terminée.
‫Parce que sinon, demande. corps. les images seront vides,
‫et bien sûr nos noms de fichiers ne seront pas enregistrés
‫dans le document de visite actuel, d'accord ?
‫Et cela termine en fait
‫la partie de téléchargement d'images ou de fichiers de cette section.
‫Alors j'espère que c'était amusant,
‫je sais que pour moi c'était vraiment cool.
‫J'aime donc beaucoup ce genre de
‫choses, ce qui donne l'impression que mes applications ressemblent vraiment au monde réel.
‫En tout cas, j'espère que ça vous a
‫plu, et à bientôt pour le prochain.