1 00:00:01,170 --> 00:00:03,440 ‫Narrateur : Dans la première partie 2 00:00:03,440 --> 00:00:06,140 ‫de cette section, nous apprendrons tout sur le 3 00:00:06,140 --> 00:00:09,660 ‫téléchargement d'images avec le package Multer et dans cette vidéo particulière, 4 00:00:09,660 --> 00:00:13,653 ‫nous commencerons à implémenter les téléchargements d'images pour les photos des utilisateurs. 5 00:00:15,230 --> 00:00:18,900 ‫Mais avant de commencer, effectuons un nettoyage rapide ici 6 00:00:18,900 --> 00:00:22,450 ‫et débarrassons-nous de cette sortie constante des cookies 7 00:00:22,450 --> 00:00:24,570 ‫que nous avons ici. 8 00:00:24,570 --> 00:00:29,093 ‫Donc c'est quelque part ici et c'est beaucoup mieux. 9 00:00:30,430 --> 00:00:33,610 ‫Maintenant, nous allons travailler sur le téléchargement 10 00:00:33,610 --> 00:00:38,010 ‫des photos des utilisateurs et ouvrons ici les itinéraires des utilisateurs, d'accord. 11 00:00:38,010 --> 00:00:41,310 ‫Ainsi, Multer est un middleware très populaire pour gérer les 12 00:00:41,310 --> 00:00:45,510 ‫données de formulaire en plusieurs parties, qui est un formulaire de codage utilisé 13 00:00:45,510 --> 00:00:48,540 ‫pour télécharger des fichiers à partir d'un formulaire. 14 00:00:48,540 --> 00:00:51,200 ‫Alors rappelez-vous comment, dans la dernière section, nous 15 00:00:51,200 --> 00:00:55,160 ‫avons utilisé un formulaire encodé par URL afin de mettre à jour les données 16 00:00:55,160 --> 00:00:58,570 ‫utilisateur et pour cela nous avons également dû inclure un middleware spécial. 17 00:00:58,570 --> 00:01:01,000 ‫Et donc Multer est essentiellement un middleware 18 00:01:01,000 --> 00:01:03,580 ‫pour les données de formulaire en plusieurs parties. 19 00:01:03,580 --> 00:01:05,770 ‫Et maintenant, voici ce que nous allons faire. 20 00:01:05,770 --> 00:01:08,460 ‫Nous permettrons à l'utilisateur de télécharger une 21 00:01:08,460 --> 00:01:11,064 ‫photo sur l'itinéraire Update Me. Ainsi, 22 00:01:11,064 --> 00:01:14,430 ‫au lieu de simplement pouvoir mettre à jour l'e-mail 23 00:01:14,430 --> 00:01:18,620 ‫et la photo, les utilisateurs pourront également télécharger leurs photos d'utilisateur. 24 00:01:18,620 --> 00:01:21,970 ‫Donc, encore une fois, commençons par installer 25 00:01:21,970 --> 00:01:25,330 ‫le package dont nous avons besoin et créons en 26 00:01:25,330 --> 00:01:30,267 ‫fait une nouvelle fenêtre de terminal ici et donc NPM installe Multer. 27 00:01:32,586 --> 00:01:37,437 ‫D'accord et ici nous voyons que nous sommes sur Multer 1. 4. 1. 28 00:01:38,420 --> 00:01:41,160 ‫Et encore une fois, si vous rencontrez des problèmes 29 00:01:41,160 --> 00:01:43,490 ‫avec ce package, assurez-vous simplement d'installer 30 00:01:43,490 --> 00:01:45,983 ‫la même version que celle que j'utilise ici. 31 00:01:47,241 --> 00:01:48,074 ‫D'accord. 32 00:01:49,150 --> 00:01:51,313 ‫Alors, incluons cela ici. 33 00:01:52,930 --> 00:01:57,070 ‫Alors Multer, exigez, Multer. 34 00:01:58,840 --> 00:02:03,040 ‫Donc, c'est facile et maintenant nous devons configurer ce que l'on 35 00:02:03,040 --> 00:02:05,780 ‫appelle un téléchargement Multer, puis l'utiliser. 36 00:02:05,780 --> 00:02:08,030 ‫Et faisons-le ici au début 37 00:02:09,330 --> 00:02:14,330 ‫et appelons-le Upload et nous appelons la fonction Multer que nous 38 00:02:16,380 --> 00:02:19,090 ‫venons d'inclure avant, puis passons un 39 00:02:19,090 --> 00:02:21,160 ‫objet pour certaines options. 40 00:02:21,160 --> 00:02:23,730 ‫Et pour l'instant, la seule option 41 00:02:23,730 --> 00:02:26,180 ‫que nous allons spécifier 42 00:02:26,180 --> 00:02:31,180 ‫est la destination et je vais la définir sur Public/image/users, d'accord. 43 00:02:34,940 --> 00:02:36,870 ‫Et c'est donc exactement le dossier dans 44 00:02:36,870 --> 00:02:38,780 ‫lequel nous voulons enregistrer toutes les 45 00:02:38,780 --> 00:02:40,570 ‫images en cours de téléchargement. 46 00:02:40,570 --> 00:02:45,570 ‫C'est donc ici, Public, Image et Utilisateurs, comme toutes les images de 47 00:02:45,740 --> 00:02:48,063 ‫tous les utilisateurs que nous 48 00:02:48,063 --> 00:02:50,750 ‫avons déjà dans notre base de données. 49 00:02:50,750 --> 00:02:53,770 ‫D'accord et bien sûr, nous pouvons configurer cela d'une 50 00:02:53,770 --> 00:02:56,480 ‫manière beaucoup plus complexe et nous allons 51 00:02:56,480 --> 00:02:58,670 ‫le faire dans notre prochaine 52 00:02:58,670 --> 00:03:02,190 ‫conférence, mais pour l'instant, je veux vraiment que vous présentiez 53 00:03:02,190 --> 00:03:04,697 ‫ce package et au fait, nous aurions 54 00:03:04,697 --> 00:03:08,010 ‫pu simplement appeler la fonction Multer sans aucune option là-dedans. 55 00:03:08,010 --> 00:03:10,940 ‫Donc, sans cela ici et là, l'image téléchargée serait simplement 56 00:03:10,940 --> 00:03:13,749 ‫stockée en mémoire et non enregistrée n'importe où 57 00:03:13,749 --> 00:03:17,590 ‫sur le disque, mais bien sûr, à ce stade, ce n'est pas ce que 58 00:03:17,590 --> 00:03:21,290 ‫nous voulons et nous devons donc au moins spécifier cette option de destination. 59 00:03:21,290 --> 00:03:23,620 ‫Et avec cela, notre fichier est alors 60 00:03:23,620 --> 00:03:26,450 ‫vraiment téléchargé dans un répertoire de notre système de fichiers. 61 00:03:26,450 --> 00:03:29,080 ‫Et je l'ai déjà mentionné, mais assurons-nous simplement 62 00:03:29,080 --> 00:03:31,960 ‫que nous sommes sur la même longueur d'onde à ce 63 00:03:31,960 --> 00:03:34,870 ‫sujet, c'est-à-dire que, bien sûr, les images ne sont pas 64 00:03:34,870 --> 00:03:37,770 ‫directement téléchargées dans la base de données, nous les téléchargeons 65 00:03:37,770 --> 00:03:40,700 ‫simplement dans notre système de fichiers, puis dans la base 66 00:03:40,700 --> 00:03:43,510 ‫de données, nous mettre un lien essentiellement vers cette image. 67 00:03:43,510 --> 00:03:46,170 ‫Donc, dans ce cas, dans chaque document 68 00:03:46,170 --> 00:03:49,450 ‫utilisateur, nous devrons nommer tout le fichier téléchargé, d'accord. 69 00:03:49,450 --> 00:03:51,690 ‫Encore une fois, nous ne le faisons pas dans cette vidéo 70 00:03:51,690 --> 00:03:53,550 ‫mais nous le ferons un peu plus tard. 71 00:03:53,550 --> 00:03:55,603 ‫Pour l'instant, faisons en sorte que cela fonctionne. 72 00:03:56,490 --> 00:03:59,000 ‫Quoi qu'il en soit, ce que nous devons 73 00:03:59,000 --> 00:04:02,150 ‫faire maintenant, c'est utiliser ce téléchargement ici pour vraiment créer une fonction 74 00:04:02,150 --> 00:04:05,223 ‫middleware que nous pouvons mettre ici dans la route Update Me. 75 00:04:06,100 --> 00:04:09,343 ‫Alors voilà, et ça marche comme ça. 76 00:04:10,700 --> 00:04:14,670 ‫Donc upload, point single, et c'est single car ici on veut 77 00:04:14,670 --> 00:04:17,810 ‫mettre à jour une seule image et puis ici 78 00:04:17,810 --> 00:04:20,830 ‫en single on passe le nom du champ qui 79 00:04:20,830 --> 00:04:22,993 ‫va contenir l'image à uploader. 80 00:04:24,000 --> 00:04:26,480 ‫Et ce sera donc une photo, d'accord. 81 00:04:26,480 --> 00:04:29,023 ‫Et par champ, je veux dire le 82 00:04:29,023 --> 00:04:31,620 ‫champ dans le formulaire qui va télécharger l'image. 83 00:04:31,620 --> 00:04:34,400 ‫D'accord, c'est logique ? 84 00:04:34,400 --> 00:04:38,040 ‫Encore une fois, nous avons inclus le package 85 00:04:38,040 --> 00:04:41,560 ‫Multer, puis nous avons créé un téléchargement. 86 00:04:41,560 --> 00:04:44,700 ‫Et ce téléchargement consiste simplement à définir quelques paramètres 87 00:04:44,700 --> 00:04:48,640 ‫où, dans cet exemple, nous définissons uniquement la destination, puis nous utilisons 88 00:04:48,640 --> 00:04:52,260 ‫ce téléchargement pour créer un nouveau middleware que nous pouvons ensuite 89 00:04:52,260 --> 00:04:55,560 ‫ajouter à cette pile de la route que nous 90 00:04:55,560 --> 00:04:58,400 ‫voulons utiliser pour télécharger le fichier . 91 00:04:58,400 --> 00:05:01,130 ‫Donc pour cela on dit upload dot single 92 00:05:01,130 --> 00:05:03,390 ‫car on n'a qu'un seul 93 00:05:03,390 --> 00:05:06,160 ‫fichier et puis enfin on précise le nom 94 00:05:06,160 --> 00:05:08,570 ‫du champ qui va contenir ce fichier. 95 00:05:08,570 --> 00:05:11,600 ‫D'accord, et donc ce middleware s'occupera ensuite de prendre 96 00:05:11,600 --> 00:05:14,610 ‫le fichier et de le copier essentiellement vers 97 00:05:14,610 --> 00:05:16,960 ‫la destination que nous avons spécifiée. 98 00:05:16,960 --> 00:05:19,040 ‫Et puis après cela, bien sûr, il 99 00:05:19,040 --> 00:05:22,083 ‫appellera le prochain middleware de la pile qui est Update Me. 100 00:05:23,210 --> 00:05:26,470 ‫De plus, ce middleware ici placera le fichier ou au 101 00:05:26,470 --> 00:05:28,600 ‫moins quelques informations sur le 102 00:05:28,600 --> 00:05:30,810 ‫fichier sur l'objet de la requête et 103 00:05:30,810 --> 00:05:33,080 ‫jetons donc un coup d'œil à cela. 104 00:05:33,080 --> 00:05:36,123 ‫Passons donc à la fonction Update Me. 105 00:05:38,490 --> 00:05:42,320 ‫Donc, ici et ici au début, disons le 106 00:05:43,300 --> 00:05:48,163 ‫journal des points de la console, le fichier des points reg. 107 00:05:49,630 --> 00:05:50,463 ‫D'accord? 108 00:05:51,410 --> 00:05:55,430 ‫Et aussi je veux jeter un œil au corps. 109 00:05:55,430 --> 00:05:58,307 ‫Génial et donc avec cela, nous sommes maintenant 110 00:05:58,307 --> 00:06:02,320 ‫prêts à tester cela et pour l'instant nous allons le tester 111 00:06:02,320 --> 00:06:04,820 ‫dans Postman mais bien sûr, plus 112 00:06:04,820 --> 00:06:08,253 ‫tard, nous ajouterons également cette fonctionnalité au formulaire, d'accord. 113 00:06:09,220 --> 00:06:13,720 ‫Allons donc au facteur ici et me mettre à jour. 114 00:06:13,720 --> 00:06:16,023 ‫Donc en gros pour mettre à jour l'utilisateur actuel. 115 00:06:17,380 --> 00:06:20,430 ‫Et l'utilisateur que je souhaite mettre à jour s'appelle 116 00:06:20,430 --> 00:06:23,700 ‫Leo, alors amenons-le ici depuis Compass, ou en fait 117 00:06:23,700 --> 00:06:26,710 ‫je pense que ce n'est même pas nécessaire 118 00:06:26,710 --> 00:06:30,460 ‫car dans notre connexion, nous avons déjà ce genre d'adresse e-mail 119 00:06:30,460 --> 00:06:35,010 ‫et son e-mail est leo@example. com et le mot 120 00:06:35,010 --> 00:06:38,090 ‫de passe est toujours le même. 121 00:06:38,090 --> 00:06:41,390 ‫Et donc, bien sûr, nous devons d'abord nous connecter en tant 122 00:06:41,390 --> 00:06:44,653 ‫qu'utilisateur et maintenant allons-y, puis mettons à jour l'utilisateur. 123 00:06:46,620 --> 00:06:50,010 ‫Donc dans le corps nous avons le nom et le rôle. 124 00:06:50,010 --> 00:06:53,593 ‫Alors mettons seulement à jour, disons le nom ici. 125 00:06:54,560 --> 00:06:59,500 ‫Donc le nom actuel est Leo Gillespie ou Gillespie, je ne sais pas 126 00:06:59,500 --> 00:07:01,113 ‫comment dire ça. 127 00:07:02,800 --> 00:07:07,800 ‫Ajoutons juste quelque chose ici au milieu, d'accord. 128 00:07:07,870 --> 00:07:11,283 ‫Et maintenant, enfin, nous spécifions la propriété photo, ou en 129 00:07:13,270 --> 00:07:16,370 ‫fait, nous ne devrions pas le faire comme ça, mais 130 00:07:16,370 --> 00:07:21,100 ‫à la place, nous devrions aller ici pour former des données, d'accord, car c'est ainsi 131 00:07:21,100 --> 00:07:22,810 ‫que nous pouvons envoyer 132 00:07:22,810 --> 00:07:25,543 ‫des données de formulaire en plusieurs parties, d'accord. 133 00:07:26,410 --> 00:07:31,410 ‫Alors, copions juste le nom ici et c'est Nom. 134 00:07:33,470 --> 00:07:37,813 ‫Très bien, donc ici, la clé est Nom, 135 00:07:37,813 --> 00:07:40,763 ‫puis la valeur est celle-ci. 136 00:07:42,350 --> 00:07:46,770 ‫Ensuite, nous spécifions enfin le champ de la photo, puis ici 137 00:07:46,770 --> 00:07:50,210 ‫nous pouvons réellement spécifier ce que nous voulons. 138 00:07:50,210 --> 00:07:52,700 ‫Et donc au lieu du texte qui est la 139 00:07:52,700 --> 00:07:56,520 ‫valeur par défaut, nous pouvons spécifier le fichier, puis ici nous pouvons sélectionner le 140 00:07:56,520 --> 00:07:58,163 ‫fichier que nous voulons télécharger. 141 00:07:59,240 --> 00:08:04,240 ‫Donc ce fichier, cette image, est à nouveau ici dans nos données de def, puis 142 00:08:04,350 --> 00:08:07,470 ‫dans l'image et puis ici l'image de Leo. 143 00:08:07,470 --> 00:08:10,430 ‫Et c'est pourquoi il montre cet utilisateur. 144 00:08:10,430 --> 00:08:13,800 ‫D'accord, alors cliquez sur Ouvrir et maintenant je pense que 145 00:08:13,800 --> 00:08:16,193 ‫nous sommes prêts à envoyer cette demande. 146 00:08:17,960 --> 00:08:22,200 ‫Très bien, nous avons réussi et bien sûr, comme je l'ai dit auparavant, la photo 147 00:08:22,200 --> 00:08:25,880 ‫n'a évidemment pas été mise à jour ici dans la sortie de la 148 00:08:25,880 --> 00:08:28,450 ‫base de données car c'est pour la prochaine conférence. 149 00:08:28,450 --> 00:08:31,630 ‫Pour l'instant, nous voulons juste vraiment télécharger cette image dans 150 00:08:31,630 --> 00:08:33,803 ‫le dossier que nous avons spécifié. 151 00:08:34,960 --> 00:08:39,180 ‫Très bien, maintenant jetons également un coup d'œil ici à notre sortie et 152 00:08:39,180 --> 00:08:43,430 ‫nous avons donc ici le fichier de points de requête, qui est celui-ci, et 153 00:08:43,430 --> 00:08:46,460 ‫nous obtenons donc toutes sortes d'informations à ce sujet. 154 00:08:46,460 --> 00:08:50,910 ‫Donc le nom d'origine, c'est la destination que nous avons spécifiée, le 155 00:08:50,910 --> 00:08:54,370 ‫nouveau nom de fichier ici, et aussi la taille. 156 00:08:54,370 --> 00:08:57,980 ‫D'accord, c'est donc le fichier de points de requête, puis rappelez-vous que 157 00:08:57,980 --> 00:08:59,920 ‫nous avons également enregistré le corps. 158 00:08:59,920 --> 00:09:03,810 ‫Et donc le corps n'est plus que le nom, d'accord. 159 00:09:03,810 --> 00:09:07,100 ‫Notre analyse du corps n'est donc pas vraiment capable de gérer les 160 00:09:07,100 --> 00:09:09,470 ‫fichiers et c'est pourquoi le fichier n'apparaît pas 161 00:09:09,470 --> 00:09:11,790 ‫du tout dans le corps et bien 162 00:09:11,790 --> 00:09:15,920 ‫sûr, c'est la seule raison pour laquelle nous avons réellement besoin du package Multer. 163 00:09:15,920 --> 00:09:19,570 ‫Quoi qu'il en soit, jetons maintenant un coup d'œil à notre dossier 164 00:09:19,570 --> 00:09:24,241 ‫et nous avons donc ici l'image, les utilisateurs, et quelque part ici devrait se trouver l'image 165 00:09:24,241 --> 00:09:26,890 ‫que nous venons de télécharger, mais je ne 166 00:09:28,150 --> 00:09:30,160 ‫peux pas vraiment la voir ici. 167 00:09:30,160 --> 00:09:33,313 ‫Mettons à jour, ah et en effet le voici. 168 00:09:34,960 --> 00:09:37,890 ‫Donc, si nous cliquons dessus maintenant, nous ne pouvons pas 169 00:09:37,890 --> 00:09:39,840 ‫vraiment le voir car, comme vous 170 00:09:39,840 --> 00:09:42,600 ‫pouvez le voir ici, il n'a même pas d'extension, d'accord. 171 00:09:42,600 --> 00:09:46,240 ‫Et c'est pourquoi nous ne pouvons pas vraiment l'ouvrir à ce stade. 172 00:09:46,240 --> 00:09:49,690 ‫Le fichier est donc vraiment apparu ici dans notre dossier et 173 00:09:49,690 --> 00:09:52,320 ‫nous avons donc le téléchargement qui fonctionne réellement. 174 00:09:52,320 --> 00:09:54,870 ‫Eh bien, au moins en quelque sorte, mais nous ne sommes 175 00:09:54,870 --> 00:09:57,350 ‫pas vraiment là où nous le voulons, n'est-ce pas. 176 00:09:57,350 --> 00:09:59,960 ‫Nous voulons donc lui donner un meilleur nom de 177 00:09:59,960 --> 00:10:02,100 ‫fichier et nous voulons également réorganiser un 178 00:10:02,100 --> 00:10:04,690 ‫peu ce code que nous avons à ce stade. 179 00:10:04,690 --> 00:10:07,123 ‫Et alors faisons-le dans la prochaine vidéo.