‫Narrateur : Dans la première partie
‫de cette section, nous apprendrons tout sur le
‫téléchargement d'images avec le package Multer et dans cette vidéo particulière,
‫nous commencerons à implémenter les téléchargements d'images pour les photos des utilisateurs.
‫Mais avant de commencer, effectuons un nettoyage rapide ici
‫et débarrassons-nous de cette sortie constante des cookies
‫que nous avons ici.
‫Donc c'est quelque part ici et c'est beaucoup mieux.
‫Maintenant, nous allons travailler sur le téléchargement
‫des photos des utilisateurs et ouvrons ici les itinéraires des utilisateurs, d'accord.
‫Ainsi, Multer est un middleware très populaire pour gérer les
‫données de formulaire en plusieurs parties, qui est un formulaire de codage utilisé
‫pour télécharger des fichiers à partir d'un formulaire.
‫Alors rappelez-vous comment, dans la dernière section, nous
‫avons utilisé un formulaire encodé par URL afin de mettre à jour les données
‫utilisateur et pour cela nous avons également dû inclure un middleware spécial.
‫Et donc Multer est essentiellement un middleware
‫pour les données de formulaire en plusieurs parties.
‫Et maintenant, voici ce que nous allons faire.
‫Nous permettrons à l'utilisateur de télécharger une
‫photo sur l'itinéraire Update Me. Ainsi,
‫au lieu de simplement pouvoir mettre à jour l'e-mail
‫et la photo, les utilisateurs pourront également télécharger leurs photos d'utilisateur.
‫Donc, encore une fois, commençons par installer
‫le package dont nous avons besoin et créons en
‫fait une nouvelle fenêtre de terminal ici et donc NPM installe Multer.
‫D'accord et ici nous voyons que nous sommes sur Multer 1. 4. 1.
‫Et encore une fois, si vous rencontrez des problèmes
‫avec ce package, assurez-vous simplement d'installer
‫la même version que celle que j'utilise ici.
‫D'accord.
‫Alors, incluons cela ici.
‫Alors Multer, exigez, Multer.
‫Donc, c'est facile et maintenant nous devons configurer ce que l'on
‫appelle un téléchargement Multer, puis l'utiliser.
‫Et faisons-le ici au début
‫et appelons-le Upload et nous appelons la fonction Multer que nous
‫venons d'inclure avant, puis passons un
‫objet pour certaines options.
‫Et pour l'instant, la seule option
‫que nous allons spécifier
‫est la destination et je vais la définir sur Public/image/users, d'accord.
‫Et c'est donc exactement le dossier dans
‫lequel nous voulons enregistrer toutes les
‫images en cours de téléchargement.
‫C'est donc ici, Public, Image et Utilisateurs, comme toutes les images de
‫tous les utilisateurs que nous
‫avons déjà dans notre base de données.
‫D'accord et bien sûr, nous pouvons configurer cela d'une
‫manière beaucoup plus complexe et nous allons
‫le faire dans notre prochaine
‫conférence, mais pour l'instant, je veux vraiment que vous présentiez
‫ce package et au fait, nous aurions
‫pu simplement appeler la fonction Multer sans aucune option là-dedans.
‫Donc, sans cela ici et là, l'image téléchargée serait simplement
‫stockée en mémoire et non enregistrée n'importe où
‫sur le disque, mais bien sûr, à ce stade, ce n'est pas ce que
‫nous voulons et nous devons donc au moins spécifier cette option de destination.
‫Et avec cela, notre fichier est alors
‫vraiment téléchargé dans un répertoire de notre système de fichiers.
‫Et je l'ai déjà mentionné, mais assurons-nous simplement
‫que nous sommes sur la même longueur d'onde à ce
‫sujet, c'est-à-dire que, bien sûr, les images ne sont pas
‫directement téléchargées dans la base de données, nous les téléchargeons
‫simplement dans notre système de fichiers, puis dans la base
‫de données, nous mettre un lien essentiellement vers cette image.
‫Donc, dans ce cas, dans chaque document
‫utilisateur, nous devrons nommer tout le fichier téléchargé, d'accord.
‫Encore une fois, nous ne le faisons pas dans cette vidéo
‫mais nous le ferons un peu plus tard.
‫Pour l'instant, faisons en sorte que cela fonctionne.
‫Quoi qu'il en soit, ce que nous devons
‫faire maintenant, c'est utiliser ce téléchargement ici pour vraiment créer une fonction
‫middleware que nous pouvons mettre ici dans la route Update Me.
‫Alors voilà, et ça marche comme ça.
‫Donc upload, point single, et c'est single car ici on veut
‫mettre à jour une seule image et puis ici
‫en single on passe le nom du champ qui
‫va contenir l'image à uploader.
‫Et ce sera donc une photo, d'accord.
‫Et par champ, je veux dire le
‫champ dans le formulaire qui va télécharger l'image.
‫D'accord, c'est logique ?
‫Encore une fois, nous avons inclus le package
‫Multer, puis nous avons créé un téléchargement.
‫Et ce téléchargement consiste simplement à définir quelques paramètres
‫où, dans cet exemple, nous définissons uniquement la destination, puis nous utilisons
‫ce téléchargement pour créer un nouveau middleware que nous pouvons ensuite
‫ajouter à cette pile de la route que nous
‫voulons utiliser pour télécharger le fichier .
‫Donc pour cela on dit upload dot single
‫car on n'a qu'un seul
‫fichier et puis enfin on précise le nom
‫du champ qui va contenir ce fichier.
‫D'accord, et donc ce middleware s'occupera ensuite de prendre
‫le fichier et de le copier essentiellement vers
‫la destination que nous avons spécifiée.
‫Et puis après cela, bien sûr, il
‫appellera le prochain middleware de la pile qui est Update Me.
‫De plus, ce middleware ici placera le fichier ou au
‫moins quelques informations sur le
‫fichier sur l'objet de la requête et
‫jetons donc un coup d'œil à cela.
‫Passons donc à la fonction Update Me.
‫Donc, ici et ici au début, disons le
‫journal des points de la console, le fichier des points reg.
‫D'accord?
‫Et aussi je veux jeter un œil au corps.
‫Génial et donc avec cela, nous sommes maintenant
‫prêts à tester cela et pour l'instant nous allons le tester
‫dans Postman mais bien sûr, plus
‫tard, nous ajouterons également cette fonctionnalité au formulaire, d'accord.
‫Allons donc au facteur ici et me mettre à jour.
‫Donc en gros pour mettre à jour l'utilisateur actuel.
‫Et l'utilisateur que je souhaite mettre à jour s'appelle
‫Leo, alors amenons-le ici depuis Compass, ou en fait
‫je pense que ce n'est même pas nécessaire
‫car dans notre connexion, nous avons déjà ce genre d'adresse e-mail
‫et son e-mail est leo@example. com et le mot
‫de passe est toujours le même.
‫Et donc, bien sûr, nous devons d'abord nous connecter en tant
‫qu'utilisateur et maintenant allons-y, puis mettons à jour l'utilisateur.
‫Donc dans le corps nous avons le nom et le rôle.
‫Alors mettons seulement à jour, disons le nom ici.
‫Donc le nom actuel est Leo Gillespie ou Gillespie, je ne sais pas
‫comment dire ça.
‫Ajoutons juste quelque chose ici au milieu, d'accord.
‫Et maintenant, enfin, nous spécifions la propriété photo, ou en
‫fait, nous ne devrions pas le faire comme ça, mais
‫à la place, nous devrions aller ici pour former des données, d'accord, car c'est ainsi
‫que nous pouvons envoyer
‫des données de formulaire en plusieurs parties, d'accord.
‫Alors, copions juste le nom ici et c'est Nom.
‫Très bien, donc ici, la clé est Nom,
‫puis la valeur est celle-ci.
‫Ensuite, nous spécifions enfin le champ de la photo, puis ici
‫nous pouvons réellement spécifier ce que nous voulons.
‫Et donc au lieu du texte qui est la
‫valeur par défaut, nous pouvons spécifier le fichier, puis ici nous pouvons sélectionner le
‫fichier que nous voulons télécharger.
‫Donc ce fichier, cette image, est à nouveau ici dans nos données de def, puis
‫dans l'image et puis ici l'image de Leo.
‫Et c'est pourquoi il montre cet utilisateur.
‫D'accord, alors cliquez sur Ouvrir et maintenant je pense que
‫nous sommes prêts à envoyer cette demande.
‫Très bien, nous avons réussi et bien sûr, comme je l'ai dit auparavant, la photo
‫n'a évidemment pas été mise à jour ici dans la sortie de la
‫base de données car c'est pour la prochaine conférence.
‫Pour l'instant, nous voulons juste vraiment télécharger cette image dans
‫le dossier que nous avons spécifié.
‫Très bien, maintenant jetons également un coup d'œil ici à notre sortie et
‫nous avons donc ici le fichier de points de requête, qui est celui-ci, et
‫nous obtenons donc toutes sortes d'informations à ce sujet.
‫Donc le nom d'origine, c'est la destination que nous avons spécifiée, le
‫nouveau nom de fichier ici, et aussi la taille.
‫D'accord, c'est donc le fichier de points de requête, puis rappelez-vous que
‫nous avons également enregistré le corps.
‫Et donc le corps n'est plus que le nom, d'accord.
‫Notre analyse du corps n'est donc pas vraiment capable de gérer les
‫fichiers et c'est pourquoi le fichier n'apparaît pas
‫du tout dans le corps et bien
‫sûr, c'est la seule raison pour laquelle nous avons réellement besoin du package Multer.
‫Quoi qu'il en soit, jetons maintenant un coup d'œil à notre dossier
‫et nous avons donc ici l'image, les utilisateurs, et quelque part ici devrait se trouver l'image
‫que nous venons de télécharger, mais je ne
‫peux pas vraiment la voir ici.
‫Mettons à jour, ah et en effet le voici.
‫Donc, si nous cliquons dessus maintenant, nous ne pouvons pas
‫vraiment le voir car, comme vous
‫pouvez le voir ici, il n'a même pas d'extension, d'accord.
‫Et c'est pourquoi nous ne pouvons pas vraiment l'ouvrir à ce stade.
‫Le fichier est donc vraiment apparu ici dans notre dossier et
‫nous avons donc le téléchargement qui fonctionne réellement.
‫Eh bien, au moins en quelque sorte, mais nous ne sommes
‫pas vraiment là où nous le voulons, n'est-ce pas.
‫Nous voulons donc lui donner un meilleur nom de
‫fichier et nous voulons également réorganiser un
‫peu ce code que nous avons à ce stade.
‫Et alors faisons-le dans la prochaine vidéo.