1 00:00:01,140 --> 00:00:03,990 ‫Narrateur : Maintenant que la fonction de 2 00:00:03,990 --> 00:00:08,080 ‫téléchargement de photos utilisateur est terminée, apprenons maintenant à télécharger plusieurs 3 00:00:08,080 --> 00:00:10,080 ‫fichiers en même temps 4 00:00:10,080 --> 00:00:13,170 ‫et à traiter plusieurs images en même temps. 5 00:00:13,170 --> 00:00:15,430 ‫Et donc dans cette conférence et la 6 00:00:15,430 --> 00:00:18,713 ‫suivante, nous allons télécharger et traiter les photos de la tournée. 7 00:00:20,770 --> 00:00:23,750 ‫Et pour commencer, rappelons-nous en fait quel type d'images 8 00:00:23,750 --> 00:00:28,070 ‫nous voulons pour nos tournées et aussi combien, et nous devrions donc jeter 9 00:00:28,070 --> 00:00:31,033 ‫un œil à notre modèle de tournée ici. 10 00:00:32,450 --> 00:00:37,450 ‫Et donc ici, nous avons la couverture de l'image et ce n'est 11 00:00:38,050 --> 00:00:40,170 ‫en fait qu'une seule 12 00:00:40,170 --> 00:00:42,400 ‫image, puis nous avons également le 13 00:00:42,400 --> 00:00:45,610 ‫champ d'image qui va être un tableau d'images. 14 00:00:45,610 --> 00:00:48,390 ‫Et généralement, il devrait y avoir au moins trois images, 15 00:00:48,390 --> 00:00:51,000 ‫car c'est le nombre d'images que nous avons dans la 16 00:00:51,000 --> 00:00:52,950 ‫page de détail de la visite. 17 00:00:52,950 --> 00:00:53,810 ‫À droite? 18 00:00:53,810 --> 00:00:56,010 ‫Encore une fois, nous allons avoir une 19 00:00:56,010 --> 00:00:58,290 ‫couverture d'image et des images sous forme de tableau. 20 00:00:58,290 --> 00:00:59,410 ‫Très bien. 21 00:00:59,410 --> 00:01:01,240 ‫Maintenant, la façon dont 22 00:01:01,240 --> 00:01:04,080 ‫nous allons télécharger et traiter ces images va 23 00:01:04,080 --> 00:01:06,140 ‫être très similaire à ce que 24 00:01:06,140 --> 00:01:09,620 ‫nous avons fait avec les utilisateurs, et allons donc de 25 00:01:09,620 --> 00:01:13,444 ‫l'avant dans le contrôleur utilisateur et copions au moins cette partie 26 00:01:13,444 --> 00:01:15,820 ‫initiale ici de la configuration du multer. 27 00:01:15,820 --> 00:01:18,620 ‫Très bien, alors saisissez-le, puis dans 28 00:01:18,620 --> 00:01:21,883 ‫le contrôleur de tournée, ici en haut, 29 00:01:23,130 --> 00:01:25,774 ‫mettons-le ici et obtenons 30 00:01:25,774 --> 00:01:29,293 ‫également le multer et la netteté nécessaires. 31 00:01:33,410 --> 00:01:37,610 ‫Très bien, super. 32 00:01:37,610 --> 00:01:39,850 ‫Et donc, comme avant, nous 33 00:01:39,850 --> 00:01:42,750 ‫allons stocker les images en mémoire, d'accord, 34 00:01:42,750 --> 00:01:46,900 ‫et nous n'autorisons également que les images à passer notre filtre. 35 00:01:46,900 --> 00:01:51,720 ‫En d'autres termes, nous voulons seulement pouvoir télécharger des images. 36 00:01:51,720 --> 00:01:52,553 ‫Très bien. 37 00:01:52,553 --> 00:01:54,670 ‫Ensuite, ici, nous créons ou téléchargeons 38 00:01:54,670 --> 00:01:57,060 ‫exactement de la même manière qu'auparavant, et 39 00:01:57,060 --> 00:01:58,180 ‫donc maintenant, 40 00:01:58,180 --> 00:02:01,420 ‫créons réellement le middleware à partir de ce téléchargement. 41 00:02:01,420 --> 00:02:02,780 ‫Très bien. 42 00:02:02,780 --> 00:02:07,780 ‫Alors exportez le tour de téléchargement de points, les images, puis téléchargez. 43 00:02:12,540 --> 00:02:14,536 ‫Et maintenant, voici la 44 00:02:14,536 --> 00:02:17,020 ‫partie différente, donc quelque chose qui va 45 00:02:17,020 --> 00:02:19,650 ‫être différent de ce que nous avons fait 46 00:02:19,650 --> 00:02:24,380 ‫ici dans le contrôleur des utilisateurs parce que nous avions uploadé un point unique. 47 00:02:24,380 --> 00:02:25,213 ‫D'accord. 48 00:02:25,213 --> 00:02:28,110 ‫Et c'était parce que nous n'avions qu'un seul champ 49 00:02:28,110 --> 00:02:30,000 ‫avec un fichier que nous 50 00:02:30,000 --> 00:02:32,930 ‫voulions télécharger et donc voici le nom de ce champ. 51 00:02:32,930 --> 00:02:33,763 ‫À droite? 52 00:02:33,763 --> 00:02:36,150 ‫Mais maintenant, nous avons en fait plusieurs fichiers 53 00:02:36,150 --> 00:02:38,490 ‫et dans l'un d'eux, nous avons une 54 00:02:38,490 --> 00:02:40,920 ‫image et dans l'autre, nous avons trois images. 55 00:02:40,920 --> 00:02:42,537 ‫Alors, comment pouvons-nous faire cela? 56 00:02:42,537 --> 00:02:47,010 ‫Eh bien, nous allons utiliser des champs de points de téléchargement, et 57 00:02:47,010 --> 00:02:49,850 ‫donc multer est en fait parfaitement capable de 58 00:02:49,850 --> 00:02:52,280 ‫gérer ce genre de situations. 59 00:02:52,280 --> 00:02:54,570 ‫On passe donc ici un tableau et 60 00:02:54,570 --> 00:02:57,520 ‫chacun des éléments est un objet dont on précise 61 00:02:57,520 --> 00:02:59,283 ‫ensuite le nom du champ. 62 00:03:01,020 --> 00:03:02,420 ‫Et donc le premier, 63 00:03:02,420 --> 00:03:07,420 ‫rappelez-vous, est la couverture de l'image, puis nous disons que le nombre maximum est de un. 64 00:03:09,920 --> 00:03:11,820 ‫Et donc cela signifie que 65 00:03:11,820 --> 00:03:14,220 ‫nous ne pouvons avoir qu'un seul champ 66 00:03:14,220 --> 00:03:16,730 ‫appelé couverture d'image, qui va ensuite être traité. 67 00:03:16,730 --> 00:03:20,163 ‫Très bien, puis faisons de même pour nos images, c'est donc 68 00:03:21,910 --> 00:03:24,210 ‫l'autre champ de notre base de données 69 00:03:24,210 --> 00:03:26,300 ‫et donc ici nous l'appelons également 70 00:03:27,400 --> 00:03:30,683 ‫images et ici disons que le nombre maximum est de trois. 71 00:03:31,950 --> 00:03:32,783 ‫Très bien. 72 00:03:34,440 --> 00:03:37,350 ‫Et dans le cas où nous n'avions pas la couverture 73 00:03:37,350 --> 00:03:41,340 ‫de l'image et si cela n'avait qu'un seul champ qui accepte plusieurs images ou 74 00:03:41,340 --> 00:03:43,870 ‫plusieurs fichiers en même temps, nous aurions pu 75 00:03:43,870 --> 00:03:45,483 ‫le faire comme ça. 76 00:03:46,990 --> 00:03:51,910 ‫Nous utiliserions donc un tableau de points de téléchargement, d'accord ? 77 00:03:51,910 --> 00:03:53,460 ‫Et puis le nom 78 00:03:55,920 --> 00:04:00,730 ‫du champ, puis fondamentalement le nombre maximum ici comme un nombre comme celui-ci. 79 00:04:00,730 --> 00:04:01,640 ‫Très bien? 80 00:04:01,640 --> 00:04:06,120 ‫Donc, quand il n'y en a qu'un, alors il s'agit d'un seul point de téléchargement, disons une 81 00:04:09,520 --> 00:04:13,240 ‫image, lorsqu'il y en a plusieurs avec le même nom, alors c'est un tableau 82 00:04:13,240 --> 00:04:16,330 ‫de points de téléchargement et lorsqu'il y a fondamentalement un mélange d'entre 83 00:04:16,330 --> 00:04:19,303 ‫eux, alors ce sont des champs de points de téléchargement. 84 00:04:21,330 --> 00:04:22,750 ‫D'accord? 85 00:04:22,750 --> 00:04:25,300 ‫Maintenant, cela semble peut-être un 86 00:04:25,300 --> 00:04:28,320 ‫peu compliqué maintenant, alors avant de continuer, reproduisons 87 00:04:28,320 --> 00:04:31,630 ‫ce type de requête dans Postman, d'accord ? 88 00:04:31,630 --> 00:04:33,750 ‫Et en fait, avant de faire cela, nous 89 00:04:33,750 --> 00:04:35,523 ‫devons créer une nouvelle tournée. 90 00:04:37,190 --> 00:04:39,280 ‫Très bien, et en fait, je vais 91 00:04:39,280 --> 00:04:42,490 ‫le faire ici dans la boussole simplement en dupliquant l'une des 92 00:04:42,490 --> 00:04:44,330 ‫tournées que nous avons déjà. 93 00:04:44,330 --> 00:04:46,623 ‫Alors disons ici, le Sea Explorer, et 94 00:04:47,920 --> 00:04:49,680 ‫maintenant je le duplique. 95 00:04:49,680 --> 00:04:53,780 ‫Et donc ici, je peux changer ce que je veux avoir différent 96 00:04:53,780 --> 00:04:56,743 ‫et celui-ci s'appelle The Mountain Biker, disons une durée 97 00:04:59,270 --> 00:05:04,263 ‫de cinq, une taille de groupe maximale de dix, et puis ce qui compte vraiment, 98 00:05:05,190 --> 00:05:08,120 ‫c'est de se débarrasser de la couverture de 99 00:05:08,120 --> 00:05:12,840 ‫l'image parce que c'est ce que nous voulez mettre à jour plus tard et 100 00:05:12,840 --> 00:05:14,453 ‫aussi le tableau d'images. 101 00:05:15,640 --> 00:05:20,300 ‫Créé à peut aussi aller et bien 102 00:05:20,300 --> 00:05:25,300 ‫sûr il faut changer de slug, donc de vététiste. 103 00:05:27,780 --> 00:05:28,710 ‫D'accord? 104 00:05:28,710 --> 00:05:30,390 ‫Et au fait, nous 105 00:05:30,390 --> 00:05:34,200 ‫devions créer un nouveau circuit comme celui-ci afin que nous ayons réellement 106 00:05:34,200 --> 00:05:36,970 ‫les lieux, le résumé et la description, et tout 107 00:05:36,970 --> 00:05:41,030 ‫le reste, afin que le touriste puisse correctement s'afficher sur notre site Web. 108 00:05:41,030 --> 00:05:44,770 ‫Très bien, alors insérons-le et il devrait 109 00:05:44,770 --> 00:05:49,270 ‫donc être quelque part ici juste à la fin, d'accord. 110 00:05:49,270 --> 00:05:54,270 ‫Alors saisissons l'ID ici et maintenant ici dans Postman, 111 00:05:55,070 --> 00:05:59,020 ‫puis mettons à jour la tournée. 112 00:05:59,020 --> 00:06:02,960 ‫Donc, nous transmettons cela ici et maintenant dans notre 113 00:06:02,960 --> 00:06:07,960 ‫corps, rappelons-nous que nous devons passer des données brutes aux données de forme. 114 00:06:08,104 --> 00:06:09,103 ‫D'accord? 115 00:06:11,490 --> 00:06:16,490 ‫Fermons tout cela ici et connectons-nous également ici en tant qu'administrateur, car 116 00:06:17,090 --> 00:06:20,210 ‫sinon la mise à jour de la 117 00:06:20,210 --> 00:06:22,010 ‫visite ne fonctionnera pas. 118 00:06:23,070 --> 00:06:28,070 ‫Donc admin@nators. io, d'accord. 119 00:06:31,740 --> 00:06:35,508 ‫Et maintenant, recréons simplement une requête de corps ici similaire à 120 00:06:35,508 --> 00:06:38,210 ‫celle que nous venons de spécifier ici. 121 00:06:38,210 --> 00:06:42,070 ‫Donc fondamentalement similaire à ce que notre téléchargement multer attend, 122 00:06:42,070 --> 00:06:44,973 ‫donc une couverture d'image et trois images. 123 00:06:47,060 --> 00:06:52,060 ‫Donc, la couverture de l'image, qui est un fichier, et donc sélectionnons-la. 124 00:06:55,670 --> 00:06:58,630 ‫Et donc ici, nous avons ces 125 00:06:59,660 --> 00:07:02,050 ‫nouvelles photos pour les tournées 126 00:07:02,050 --> 00:07:05,837 ‫et utilisons cette première ici comme image de 127 00:07:08,450 --> 00:07:12,290 ‫couverture, puis images, mettons-la ici pour archiver également, puis 128 00:07:12,290 --> 00:07:14,543 ‫voici les trois autres. 129 00:07:16,420 --> 00:07:19,943 ‫Et maintenant, comme vous le voyez, elles seront toutes appelées images. 130 00:07:26,440 --> 00:07:29,940 ‫D'accord, et nous ne pouvons en avoir que trois au 131 00:07:29,940 --> 00:07:32,070 ‫maximum, au moins trois d'entre 132 00:07:32,070 --> 00:07:34,680 ‫eux seront traités par multer, d'accord ? 133 00:07:37,620 --> 00:07:40,490 ‫Et en fait, ici, vous voyez que nous 134 00:07:40,490 --> 00:07:43,380 ‫devons vraiment redimensionner celui-ci car sur notre site Web, 135 00:07:43,380 --> 00:07:46,090 ‫ils apparaissent tous dans ce format paysage et 136 00:07:46,090 --> 00:07:48,550 ‫non portrait comme nous l'avons ici. 137 00:07:48,550 --> 00:07:49,383 ‫Très bien? 138 00:07:49,383 --> 00:07:51,139 ‫Et c'est bien 139 00:07:51,139 --> 00:07:55,940 ‫sûr pour ça qu'il faut aussi traiter ces images, d'accord ? 140 00:07:55,940 --> 00:07:58,590 ‫Et bien sûr, nous pouvons également changer 141 00:07:58,590 --> 00:08:03,563 ‫d'autres choses ici, alors disons que nous voulons changer le prix en 9-9-7, d'accord ? 142 00:08:05,610 --> 00:08:09,690 ‫Maintenant, je ne vais pas envoyer cette demande pour l'instant car 143 00:08:09,690 --> 00:08:12,500 ‫nous n'avons aucune logique implémentée pour la gérer 144 00:08:12,500 --> 00:08:15,280 ‫à ce stade, n'est-ce pas, car nous ne 145 00:08:15,280 --> 00:08:17,260 ‫la téléchargeons pas vraiment 146 00:08:17,260 --> 00:08:21,360 ‫dans le système de fichiers, mais seulement l'enregistrons dans la mémoire . 147 00:08:21,360 --> 00:08:23,870 ‫Et donc juste pour les 148 00:08:23,870 --> 00:08:26,808 ‫regarder rapidement, créons en fait notre prochain middleware 149 00:08:26,808 --> 00:08:29,913 ‫ici, qui sera celui qui traitera ces images. 150 00:08:31,250 --> 00:08:36,250 ‫Donc, exportez les images de la visite redimensionnée par point, donc demande, réponse, 151 00:08:42,810 --> 00:08:47,810 ‫et ensuite, et permet maintenant de les enregistrer ici sur la console. 152 00:08:50,620 --> 00:08:53,840 ‫Très bien, et dans le cas où nous avons plusieurs 153 00:08:53,840 --> 00:08:58,520 ‫fichiers, il s'agit en fait de fichiers à points sur demande, et pas seulement de fichiers. 154 00:08:58,520 --> 00:08:59,610 ‫Très bien? 155 00:08:59,610 --> 00:09:02,460 ‫Donc, ici, cela produira essentiellement un fichier 156 00:09:04,030 --> 00:09:07,870 ‫de points de requête tandis que les champs et le 157 00:09:07,870 --> 00:09:12,603 ‫tableau produiront tous deux des fichiers de points de requête, donc le pluriel. 158 00:09:14,215 --> 00:09:16,420 ‫Très bien, alors enregistrez-le sur 159 00:09:16,420 --> 00:09:19,690 ‫la console, puis appelons également Next ici afin 160 00:09:19,690 --> 00:09:21,440 ‫que nous puissions 161 00:09:21,440 --> 00:09:25,000 ‫en fait terminer plus tard le cycle demande-réponse, d'accord. 162 00:09:25,000 --> 00:09:26,730 ‫Sauvegardez-le et maintenant tout ce 163 00:09:26,730 --> 00:09:29,700 ‫que nous avons à faire pour tester réellement la requête 164 00:09:29,700 --> 00:09:32,790 ‫est d'ajouter ces deux nouveaux middlewares au gestionnaire de route. 165 00:09:32,790 --> 00:09:37,130 ‫D'accord, donc les itinéraires de tournée et tout comme avec les utilisateurs, pour rester 166 00:09:37,130 --> 00:09:39,600 ‫simple ici, nous n'autoriserons le téléchargement d'images que 167 00:09:39,600 --> 00:09:41,953 ‫lors d'une mise à jour de tournée. 168 00:09:43,360 --> 00:09:48,360 ‫Donc, c'est ici que nous avons cette demande de correctif, d'accord, et nous 169 00:09:49,280 --> 00:09:52,320 ‫avons donc déjà un tas de middlewares, 170 00:09:52,320 --> 00:09:56,180 ‫alors protégez, restreignez-vous aux administrateurs et aux guides, et maintenant 171 00:09:56,180 --> 00:10:01,180 ‫ajoutons également des images de visite de téléchargement de points de contrôleur de 172 00:10:03,160 --> 00:10:08,160 ‫tournée et une visite de redimensionnement de point de contrôleur de tournée images. 173 00:10:08,360 --> 00:10:13,130 ‫C'est donc une très belle pile middleware ici, d'accord ? 174 00:10:13,130 --> 00:10:16,000 ‫Et donc je pense que maintenant nous sommes 175 00:10:16,000 --> 00:10:18,890 ‫prêts à tester la requête que nous avons créée ici. 176 00:10:18,890 --> 00:10:21,830 ‫Et encore une fois, bien sûr, cela ne fera rien, cela 177 00:10:21,830 --> 00:10:24,500 ‫ne sauvegardera ces images nulle part et ne mettra 178 00:10:24,500 --> 00:10:26,780 ‫pas non plus à jour la base 179 00:10:26,780 --> 00:10:30,453 ‫de données, mais pour l'instant, nous voulons simplement voir le résultat dans la console. 180 00:10:31,370 --> 00:10:34,290 ‫Eh bien, il aurait dû mettre à jour le 181 00:10:34,290 --> 00:10:37,010 ‫prix, alors jetons-y rapidement un coup d'œil. 182 00:10:37,010 --> 00:10:39,790 ‫Ouais, donc le prix est maintenant mis à jour 183 00:10:39,790 --> 00:10:43,200 ‫mais encore une fois, les images ne l'ont manifestement pas fait, d'accord ? 184 00:10:43,200 --> 00:10:46,810 ‫Et maintenant, nous les avons ici dans la console, alors 185 00:10:46,810 --> 00:10:49,843 ‫agrandissons un peu cela et nous avons donc 186 00:10:49,843 --> 00:10:53,400 ‫ici la couverture de l'image où nous avons obtenu le 187 00:10:53,400 --> 00:10:56,520 ‫nom du champ, le nom d'origine et aussi 188 00:10:56,520 --> 00:11:00,620 ‫le type mime, d'accord, alors vous voyez le tampon ici , 189 00:11:00,620 --> 00:11:03,230 ‫et il s'agit donc essentiellement d'une représentation 190 00:11:03,230 --> 00:11:05,240 ‫de l'image en mémoire. 191 00:11:05,240 --> 00:11:06,810 ‫Maintenant, il est important 192 00:11:06,810 --> 00:11:10,953 ‫de noter qu'en fait, même la couverture de l'image est un tableau, d'accord ? 193 00:11:12,290 --> 00:11:13,590 ‫Ainsi, lorsque nous 194 00:11:13,590 --> 00:11:16,480 ‫allons récupérer l'image de la couverture de l'image, 195 00:11:16,480 --> 00:11:19,660 ‫nous devrons ensuite utiliser le premier élément de ce tableau. 196 00:11:19,660 --> 00:11:22,380 ‫Et puis dans les images, ici c'est évident 197 00:11:22,380 --> 00:11:24,700 ‫qu'on a un tableau et ici 198 00:11:24,700 --> 00:11:28,080 ‫pour chacune des images on a alors un objet comme ça. 199 00:11:28,080 --> 00:11:32,530 ‫Donc, avec le nom d'origine, parcourez quatre, trois et deux, puis 200 00:11:32,530 --> 00:11:34,363 ‫chacun d'eux comme tampon. 201 00:11:36,030 --> 00:11:40,860 ‫Très bien, donc tout est bien connecté et tout ce que nous 202 00:11:40,860 --> 00:11:45,353 ‫devons maintenant faire est de créer ces images de visite redimensionnées, 203 00:11:46,290 --> 00:11:49,300 ‫car c'est là que les images seront 204 00:11:49,300 --> 00:11:51,290 ‫ensuite traitées et également enregistrées 205 00:11:51,290 --> 00:11:53,210 ‫sur le disque. 206 00:11:53,210 --> 00:11:56,903 ‫D'accord, et c'est donc le sujet de la prochaine conférence.