‫Narrateur : Maintenant que la fonction de
‫téléchargement de photos utilisateur est terminée, apprenons maintenant à télécharger plusieurs
‫fichiers en même temps
‫et à traiter plusieurs images en même temps.
‫Et donc dans cette conférence et la
‫suivante, nous allons télécharger et traiter les photos de la tournée.
‫Et pour commencer, rappelons-nous en fait quel type d'images
‫nous voulons pour nos tournées et aussi combien, et nous devrions donc jeter
‫un œil à notre modèle de tournée ici.
‫Et donc ici, nous avons la couverture de l'image et ce n'est
‫en fait qu'une seule
‫image, puis nous avons également le
‫champ d'image qui va être un tableau d'images.
‫Et généralement, il devrait y avoir au moins trois images,
‫car c'est le nombre d'images que nous avons dans la
‫page de détail de la visite.
‫À droite?
‫Encore une fois, nous allons avoir une
‫couverture d'image et des images sous forme de tableau.
‫Très bien.
‫Maintenant, la façon dont
‫nous allons télécharger et traiter ces images va
‫être très similaire à ce que
‫nous avons fait avec les utilisateurs, et allons donc de
‫l'avant dans le contrôleur utilisateur et copions au moins cette partie
‫initiale ici de la configuration du multer.
‫Très bien, alors saisissez-le, puis dans
‫le contrôleur de tournée, ici en haut,
‫mettons-le ici et obtenons
‫également le multer et la netteté nécessaires.
‫Très bien, super.
‫Et donc, comme avant, nous
‫allons stocker les images en mémoire, d'accord,
‫et nous n'autorisons également que les images à passer notre filtre.
‫En d'autres termes, nous voulons seulement pouvoir télécharger des images.
‫Très bien.
‫Ensuite, ici, nous créons ou téléchargeons
‫exactement de la même manière qu'auparavant, et
‫donc maintenant,
‫créons réellement le middleware à partir de ce téléchargement.
‫Très bien.
‫Alors exportez le tour de téléchargement de points, les images, puis téléchargez.
‫Et maintenant, voici la
‫partie différente, donc quelque chose qui va
‫être différent de ce que nous avons fait
‫ici dans le contrôleur des utilisateurs parce que nous avions uploadé un point unique.
‫D'accord.
‫Et c'était parce que nous n'avions qu'un seul champ
‫avec un fichier que nous
‫voulions télécharger et donc voici le nom de ce champ.
‫À droite?
‫Mais maintenant, nous avons en fait plusieurs fichiers
‫et dans l'un d'eux, nous avons une
‫image et dans l'autre, nous avons trois images.
‫Alors, comment pouvons-nous faire cela?
‫Eh bien, nous allons utiliser des champs de points de téléchargement, et
‫donc multer est en fait parfaitement capable de
‫gérer ce genre de situations.
‫On passe donc ici un tableau et
‫chacun des éléments est un objet dont on précise
‫ensuite le nom du champ.
‫Et donc le premier,
‫rappelez-vous, est la couverture de l'image, puis nous disons que le nombre maximum est de un.
‫Et donc cela signifie que
‫nous ne pouvons avoir qu'un seul champ
‫appelé couverture d'image, qui va ensuite être traité.
‫Très bien, puis faisons de même pour nos images, c'est donc
‫l'autre champ de notre base de données
‫et donc ici nous l'appelons également
‫images et ici disons que le nombre maximum est de trois.
‫Très bien.
‫Et dans le cas où nous n'avions pas la couverture
‫de l'image et si cela n'avait qu'un seul champ qui accepte plusieurs images ou
‫plusieurs fichiers en même temps, nous aurions pu
‫le faire comme ça.
‫Nous utiliserions donc un tableau de points de téléchargement, d'accord ?
‫Et puis le nom
‫du champ, puis fondamentalement le nombre maximum ici comme un nombre comme celui-ci.
‫Très bien?
‫Donc, quand il n'y en a qu'un, alors il s'agit d'un seul point de téléchargement, disons une
‫image, lorsqu'il y en a plusieurs avec le même nom, alors c'est un tableau
‫de points de téléchargement et lorsqu'il y a fondamentalement un mélange d'entre
‫eux, alors ce sont des champs de points de téléchargement.
‫D'accord?
‫Maintenant, cela semble peut-être un
‫peu compliqué maintenant, alors avant de continuer, reproduisons
‫ce type de requête dans Postman, d'accord ?
‫Et en fait, avant de faire cela, nous
‫devons créer une nouvelle tournée.
‫Très bien, et en fait, je vais
‫le faire ici dans la boussole simplement en dupliquant l'une des
‫tournées que nous avons déjà.
‫Alors disons ici, le Sea Explorer, et
‫maintenant je le duplique.
‫Et donc ici, je peux changer ce que je veux avoir différent
‫et celui-ci s'appelle The Mountain Biker, disons une durée
‫de cinq, une taille de groupe maximale de dix, et puis ce qui compte vraiment,
‫c'est de se débarrasser de la couverture de
‫l'image parce que c'est ce que nous voulez mettre à jour plus tard et
‫aussi le tableau d'images.
‫Créé à peut aussi aller et bien
‫sûr il faut changer de slug, donc de vététiste.
‫D'accord?
‫Et au fait, nous
‫devions créer un nouveau circuit comme celui-ci afin que nous ayons réellement
‫les lieux, le résumé et la description, et tout
‫le reste, afin que le touriste puisse correctement s'afficher sur notre site Web.
‫Très bien, alors insérons-le et il devrait
‫donc être quelque part ici juste à la fin, d'accord.
‫Alors saisissons l'ID ici et maintenant ici dans Postman,
‫puis mettons à jour la tournée.
‫Donc, nous transmettons cela ici et maintenant dans notre
‫corps, rappelons-nous que nous devons passer des données brutes aux données de forme.
‫D'accord?
‫Fermons tout cela ici et connectons-nous également ici en tant qu'administrateur, car
‫sinon la mise à jour de la
‫visite ne fonctionnera pas.
‫Donc admin@nators. io, d'accord.
‫Et maintenant, recréons simplement une requête de corps ici similaire à
‫celle que nous venons de spécifier ici.
‫Donc fondamentalement similaire à ce que notre téléchargement multer attend,
‫donc une couverture d'image et trois images.
‫Donc, la couverture de l'image, qui est un fichier, et donc sélectionnons-la.
‫Et donc ici, nous avons ces
‫nouvelles photos pour les tournées
‫et utilisons cette première ici comme image de
‫couverture, puis images, mettons-la ici pour archiver également, puis
‫voici les trois autres.
‫Et maintenant, comme vous le voyez, elles seront toutes appelées images.
‫D'accord, et nous ne pouvons en avoir que trois au
‫maximum, au moins trois d'entre
‫eux seront traités par multer, d'accord ?
‫Et en fait, ici, vous voyez que nous
‫devons vraiment redimensionner celui-ci car sur notre site Web,
‫ils apparaissent tous dans ce format paysage et
‫non portrait comme nous l'avons ici.
‫Très bien?
‫Et c'est bien
‫sûr pour ça qu'il faut aussi traiter ces images, d'accord ?
‫Et bien sûr, nous pouvons également changer
‫d'autres choses ici, alors disons que nous voulons changer le prix en 9-9-7, d'accord ?
‫Maintenant, je ne vais pas envoyer cette demande pour l'instant car
‫nous n'avons aucune logique implémentée pour la gérer
‫à ce stade, n'est-ce pas, car nous ne
‫la téléchargeons pas vraiment
‫dans le système de fichiers, mais seulement l'enregistrons dans la mémoire .
‫Et donc juste pour les
‫regarder rapidement, créons en fait notre prochain middleware
‫ici, qui sera celui qui traitera ces images.
‫Donc, exportez les images de la visite redimensionnée par point, donc demande, réponse,
‫et ensuite, et permet maintenant de les enregistrer ici sur la console.
‫Très bien, et dans le cas où nous avons plusieurs
‫fichiers, il s'agit en fait de fichiers à points sur demande, et pas seulement de fichiers.
‫Très bien?
‫Donc, ici, cela produira essentiellement un fichier
‫de points de requête tandis que les champs et le
‫tableau produiront tous deux des fichiers de points de requête, donc le pluriel.
‫Très bien, alors enregistrez-le sur
‫la console, puis appelons également Next ici afin
‫que nous puissions
‫en fait terminer plus tard le cycle demande-réponse, d'accord.
‫Sauvegardez-le et maintenant tout ce
‫que nous avons à faire pour tester réellement la requête
‫est d'ajouter ces deux nouveaux middlewares au gestionnaire de route.
‫D'accord, donc les itinéraires de tournée et tout comme avec les utilisateurs, pour rester
‫simple ici, nous n'autoriserons le téléchargement d'images que
‫lors d'une mise à jour de tournée.
‫Donc, c'est ici que nous avons cette demande de correctif, d'accord, et nous
‫avons donc déjà un tas de middlewares,
‫alors protégez, restreignez-vous aux administrateurs et aux guides, et maintenant
‫ajoutons également des images de visite de téléchargement de points de contrôleur de
‫tournée et une visite de redimensionnement de point de contrôleur de tournée images.
‫C'est donc une très belle pile middleware ici, d'accord ?
‫Et donc je pense que maintenant nous sommes
‫prêts à tester la requête que nous avons créée ici.
‫Et encore une fois, bien sûr, cela ne fera rien, cela
‫ne sauvegardera ces images nulle part et ne mettra
‫pas non plus à jour la base
‫de données, mais pour l'instant, nous voulons simplement voir le résultat dans la console.
‫Eh bien, il aurait dû mettre à jour le
‫prix, alors jetons-y rapidement un coup d'œil.
‫Ouais, donc le prix est maintenant mis à jour
‫mais encore une fois, les images ne l'ont manifestement pas fait, d'accord ?
‫Et maintenant, nous les avons ici dans la console, alors
‫agrandissons un peu cela et nous avons donc
‫ici la couverture de l'image où nous avons obtenu le
‫nom du champ, le nom d'origine et aussi
‫le type mime, d'accord, alors vous voyez le tampon ici ,
‫et il s'agit donc essentiellement d'une représentation
‫de l'image en mémoire.
‫Maintenant, il est important
‫de noter qu'en fait, même la couverture de l'image est un tableau, d'accord ?
‫Ainsi, lorsque nous
‫allons récupérer l'image de la couverture de l'image,
‫nous devrons ensuite utiliser le premier élément de ce tableau.
‫Et puis dans les images, ici c'est évident
‫qu'on a un tableau et ici
‫pour chacune des images on a alors un objet comme ça.
‫Donc, avec le nom d'origine, parcourez quatre, trois et deux, puis
‫chacun d'eux comme tampon.
‫Très bien, donc tout est bien connecté et tout ce que nous
‫devons maintenant faire est de créer ces images de visite redimensionnées,
‫car c'est là que les images seront
‫ensuite traitées et également enregistrées
‫sur le disque.
‫D'accord, et c'est donc le sujet de la prochaine conférence.