Dans la leçon précédente,
nous avons appris comment les téléchargements de fichiers sont
pris en charge par l'approche de données multi-plateformes.
Dans cet exercice, nous allons utiliser le module Multer,
auquel nous avons fait référence dans la conférence pour permettre à notre serveur express de
prendre en charge le téléchargement de fichiers image sur notre site serveur.
Ils stockent ces fichiers images dans le dossier public/images.
Ces images seraient utiles dans notre application lorsque nous fournissons
des images pour les différents plats ou les radars ou les promotions,
que nous avons construites dans notre serveur API REST.
Pour commencer avec cet exercice,
la première étape bien sûr
est d'installer le module Multer donc à l'invite de type npm installer
multer moins save et pour le moment j'utilise multer 1.3.1 dans ce cours.
Donc, une fois que nous avons installé le module multer,
allons à notre projet et ensuite implémentons une nouvelle route qui nous permet de télécharger des fichiers.
Allez dans le projet dans le dossier routes,
ajoutons un nouveau fichier nommé upload router.js.
Ce routeur, routeur express que nous allons implémenter ici,
est celui qui va prendre en charge le téléchargement des fichiers.
Donc, dans le routeur de téléchargement, laissez-moi simplement aller
au routeur plat et copier ces premières choses du routeur plat
parce que nous allons à peu près mettre en place
une structure similaire dans notre application ou le routeur de téléchargement.
Donc, laissez-moi copier cette partie et ensuite nous allons éditer ça.
Donc, dans le routeur de téléchargement,
je n'ai pas besoin de mongoose donc je vais enlever mongoose et je n'ai pas besoin de la vaisselle non plus.
Donc, ces deux-là seraient supprimés et après cela,
nous devons exprimer l'analyseur de corps et nous authentifier.
Maintenant, je vais demander le module multer ici.
Une fois que nous incluons le module multer,
maintenant ce routeur, je vais appeler cela comme routeur de téléchargement.
Donc, dira uploader routeur utiliser l'analyseur corps et
puis celui-ci, mais le routeur de téléchargement et encore une fois,
n'oubliez pas de dire les exportations de module, télécharger le routeur ici.
Donc, pour la route des routeurs de téléchargement,
nous devons ajouter les différentes méthodes.
Je vais le faire un peu plus tard, mais avant cela, nous allons mettre en place
multer pour nous permettre de télécharger les fichiers.
Maintenant, par défaut, multer peut être configuré en utilisant simplement multer dans notre application,
mais je vais faire une configuration de multer dans
cet exercice afin que nous puissions
personnaliser la façon dont multer gère le téléchargement des fichiers.
Donc, pour utiliser le multer,
l'une des options que le multer prend est pour le stockage.
Donc, multer fournit cette fonction de stockage de disque qui
nous permet de définir le moteur de stockage et ici nous pouvons configurer quelques choses.
Maintenant, s'il s'agit simplement de configurer la destination,
vous pouvez simplement dire dest deux-points,
puis spécifier le dossier de destination dans lequel les fichiers téléchargés seront stockés.
Mais ici, je vais faire une configuration supplémentaire pour le module multer ici.
Donc, c'est là que je vais utiliser le support de stockage de disque multer.
À l'intérieur du stockage sur disque,
je peux définir quelques options ici.
Les options que je vais définir vont être
destination et la seconde est le nom du fichier.
Donc, deux configurations que je vais fournir au stockage sur disque.
La destination comme vous vous attendez,
me permet de configurer la destination et cela prend
comme une configuration ici une fonction.
Ainsi, la destination est configurée en tant que fonction ici.
Cette fonction recevra la requête et aussi un objet appelé le fichier,
qui contient des informations sur le fichier qui a
été traité par multer et aussi une fonction de rappel.
Donc, cb est la fonction de rappel.
Donc, ici pour la destination,
je vais dire cb null,
le deuxième paramètre est le dossier de destination,
qui peut être exprimé sous la forme d'une chaîne où les fichiers seront stockés.
Donc, ici, je vais fournir la destination sous forme d'images de barre oblique publique.
Parce que dans cet exercice, je vais prendre en charge les téléchargements d'images.
Donc, c'est la partie que je vais spécifier ici, donc le téléchargement d'image.
Ainsi, la fonction de rappel comme vous le voyez prend deux paramètres.
Le premier est, bien sûr,
l'erreur qui dans ce cas, je vais la mettre à
null et le second est le dossier de destination,
où mes images vont être stockées.
Donc, je peux configurer cela en disant des images slash publiques.
Ainsi, dans le dossier images,
les fichiers que je télécharge seront stockés.
Pour le nom de fichier aussi,
il obtient les trois paramètres,
message de requête, fichier et la fonction de rappel.
En configurant la façon dont la fonction de rappel est appelée,
nous pouvons spécifier des informations sur le nom de fichier.
Donc, pour la fonction de rappel, je dirais cb null et il n'y a pas d'erreur ici.
Ensuite, le second insiste sur le nom du fichier,
qui va être utilisé pour le fichier spécifique qui vient d'être téléchargé,
comment il va être stocké.
Donc, cet objet de fichier que j'ai obtenu ici,
supporte un ensemble de plusieurs propriétés dessus.
L' une des propriétés est appelée, nom d'origine.
Donc, le nom original essentiellement,
nous donne le nom original du fichier du côté client qui a été téléchargé.
J' insiste pour que, lorsque le fichier est enregistré côté serveur,
le fichier sera donné exactement le même nom
que le nom d'origine du fichier qui a été téléchargé.
Pour que je puisse savoir que je télécharge
exactement le même fichier et du côté serveur lorsque
le fichier est téléchargé sera stocké avec le même nom.
Maintenant, si vous ne configurez pas cela alors,
multer par défaut donnera une chaîne aléatoire
comme le nom du fichier sans extensions.
Donc, ce n'est peut-être pas quelque chose que vous seriez
heureux d'utiliser dans cet exercice particulier.
Donc, c'est pourquoi je configure explicitement en disant que,
le fichier doit être stocké avec le nom d'origine du fichier qui a été téléchargé.
Nous allons à nouveau rencontrer cet objet de fichier
un peu plus en détail et voir comment nous
pouvons utiliser les informations de l'objet de fichier un peu plus tard.
En outre, je peux également spécifier un filtre de fichier ici pour la configuration multers.
Le filtre de fichiers me permettra de spécifier le type de fichiers que
je suis prêt à télécharger ou que je suis prêt à accepter pour le téléchargement.
Donc, pour ce faire, je vais mettre en place une autre fonction appelée
filtre de fichier image const
et celle-ci je vais définir la fonction dans une minute.
Maintenant, pour cela, je peux aussi enregistrer ceci en tant que
stockage const parce que nous avons utilisé const pour tout,
donc, je vais juste dire const storage.
Pour le filtre de fichier image,
je dirai le filtre de fichier image const.
Encore une fois, il reçoit trois paramètres requête
, objet, l'objet fichier qui contient les informations sur
le fichier qui a été téléchargé et la fonction de rappel ici.
Grâce à la fonction de rappel,
je transmets des informations à ma configuration multer qui
me permet de spécifier comment je vais stocker ces informations.
Donc, cela va être une fonction de flèche ici.
A l'intérieur de cette fonction de flèche ce que je vais vérifier est que,
je dirai si ce n'est pas le nom d'origine du fichier.
Donc, le nom d'origine est une chaîne ici.
Donc, j'essaie de voir s'il y a une correspondance pour cette chaîne en disant,
à l'intérieur ici une expression régulière.
Donc, l'expression régulière que je vais spécifier comme barre oblique,
point de barre oblique inverse et ensuite,
les options que je vais spécifier sont jpg
ou jpeg ou
png ou gif.
Donc, c'est ainsi que je spécifie l'expression régulière là.
Pour dire que
c'est correct, si l'extension du fichier contient jpg ou jpeg ou png ou gif,
alors je traiterai cela comme un fichier image et je serai prêt à accepter ces fichiers.
Donc, c'est ce que nous testons ici.
Si c'est le cas,
c'est si l'extension de fichier ne correspond à aucune de ces choses, donc,
c'est pourquoi nous ne voyons pas alors nous allons dire, retourner cb.
Ensuite, notez que, le cb le premier paramètre serait une erreur.
Donc, je vais retourner une nouvelle erreur
disant que vous pouvez télécharger uniquement des fichiers image.
Donc, nous insistons sur le fait que les seuls fichiers qu'ils
accepteront sont des fichiers image et que le second paramètre serait faux.
Parce que nous fournissons l'erreur comme premier paramètre,
le second paramètre est défini sur false.
Le contraire dit cb null true.
Donc, ce qui signifie que le fichier qui essaie d'être
téléchargé correspond au modèle et donc c'est un fichier image,
et donc nous sommes prêts à le laisser être téléchargé.
Deux configurations que nous allons fournir à ce module multer.
Comment configurer le module multer pour une utilisation dans notre application ?
C' est là que je vais déclarer const upload
comme multer et ensuite je spécifierais entre parenthèses que les options ici.
Je peux spécifier le stockage comme fonction de stockage que je viens de définir ici.
Cette fonction de stockage est le premier paramètre,
et le second paramètre est un filtre de fichiers.
Un filtre de fichier est une méthode
qui me permet de spécifier le type de fichier que je suis prêt à accepter et ensuite je dirai, filtre de fichier image.
Il suffit de basculer le mot wrap, de
sorte que vous puissiez voir toute la ligne ici.
Donc, il dit que vous pouvez télécharger uniquement des fichiers image et puis pour le multer,
je suis en train de configurer le filtre d'image, c'est tout.
Mon module multer est maintenant configuré pour me permettre de télécharger les fichiers image ici.
Ensuite, continuons maintenant et configurez le routeur de téléchargement.
Pour le routeur de téléchargement,
je vais autoriser uniquement la méthode post ici.
Ainsi, les
méthodes get, put et delete ne seront pas autorisées sur le point de terminaison du routeur de téléchargement.
Pour m'aider à faire cela,
je vais aller au routeur à plat et puis me rappeler que nous avions le mettre configuré ici déjà.
Je vais copier cela, puis venir au
routeur de téléchargement et puis je vais coller cette information ici.
Nous dirons, si c'est une opération get, je ne vais pas
prendre en charge que sur le point de terminaison serait ImageUpload.
Le get ne sera pas autorisé,
et de même le put ne sera pas autorisé,
et aussi supprimer ne sera pas autorisé.
Je ne vais pas prendre en charge aucune de ces opérations, alors mettez, supprimez.
Ces trois ne seront pas autorisés.
La seule méthode que je vais soutenir est la méthode post.
Pour la méthode post,
nous allons faire cette authentification jusqu'à ce point.
Je vais juste copier cela là-dedans,
fermer ce point de terminaison et pour le post.
Quand un fichier est posté,
comment traitons-nous ce post ?
Pour gérer le post ici,
je n'ai pas besoin de la prochaine pour cela.
Maintenant, en plus de l'authentification VerifyUser et authentifier VerifyAdmin,
sur la même ligne, je vais configurer le téléchargement.
Donc, rappelez-vous que j'avais configuré le téléchargement en utilisant multer ici.
Donc, je vais utiliser le téléchargement qui
prend en charge une fonction appelée upload.single.
Cette seule fonction prend comme paramètre.
Le nom du champ de formulaire qui spécifie ce fichier,
vous verrez que dans un court laps de temps.
Ce champ de formulaire je vais le nommer comme ImageFile ici.
Télécharger simple signifie qu'il va me permettre de télécharger un seul fichier ici.
Ce fichier unique spécifiera dans le formulaire de téléchargement à partir du côté client
dans le téléchargement de formulaire en plusieurs parties en utilisant ce nom là.
Lorsque le fichier est obtenu dans le code,
si j'arrive à ce point,
ce téléchargement prendra soin de gérer les erreurs s'il y en a,
si le fichier n'est pas correctement téléchargé et ainsi de suite.
Lorsque vous arrivez à ce point,
le fichier aurait été téléchargé avec succès et
vous devez donc gérer le fichier téléchargé.
À ce stade, nous dirons que RES.statusCode est
200, puis RES.setHeader Content-Type,
'application/json'. Ce que je vais faire ici, c'est que,
nous allons retourner cet objet req.file du serveur au client.
Cet objet req.file contiendra également le chemin d'accès au fichier et ce chemin peut être
utilisé par le client pour configurer n'importe quel endroit
où il a besoin de connaître l'emplacement de ce fichier image.
Par exemple, si vous essayez de télécharger un plat
côté serveur et les détails du plat côté serveur,
vous pouvez télécharger l'image sur le serveur, puis
vous récupérez l'URL de cette image, puis vous pouvez
inclure l'URL de cette image dans l'objet json qui décrit le plat.
Ensuite, téléchargez le document dish json sur le côté serveur.
Ensuite, le fichier req.file est transmis au client,
le fichier req.comme vous le verrez lorsque nous exécutons ce serveur,
le fichier req.contient beaucoup d'informations sur
le fichier qui vient d'être téléchargé et donc je vais l'
examiner pour obtenir des informations sur le fichier que je viens de télécharger.
C' est ainsi que nous allons configurer la méthode post là, c'est tout.
Mon routeur de téléchargement est prêt à accepter les téléchargements des fichiers.
Maintenant, tout ce que je dois faire est d'aller à app.js, puis configurer le routeur de téléchargement.
Donc, aller à app.js
Nous avons déjà tous ces routeurs.
Donc, laissez-moi simplement copier leur LeaderRouter, puis
configurer ceci comme UploadRouter.
Donc, c'est dans le fichier UploadRouter ici.
Donc, nous allons configurer le UploadRouter et ensuite descendre ci-dessous,
nous allons maintenant configurer le point de terminaison ImageUpload.
Ainsi, le point de terminaison ImageUpload me permet de télécharger le fichier.
Donc, ce serait UploadRouter. C'est ça.
Mon application est maintenant configurée pour accepter les téléchargements de fichiers.
Alors, sauvegardons les changements, puis allons jeter un oeil sur le fonctionnement de notre application.
Pour revenir au Terminal,
assurez-vous maintenant que votre serveur MongoDB est opérationnel dans
l'un des onglets Terminal ou dans l'une des commandes Windows.
Dans l'autre fenêtre,
démarrons le serveur.
Une fois que notre serveur est opérationnel,
nous irons à Postman et ensuite envoyer ou plutôt télécharger un fichier de Postman.
Donc, comme je l'ai mentionné,
pour télécharger un fichier,
vous utiliserez le multipart/form-data.
Alors, d'abord, laissez-moi me connecter.
Donc, je vais faire un post sur la connexion des utilisateurs locaux,
et je me connecterai en tant qu'administrateur parce que
seul l'administrateur peut y télécharger leurs fichiers.
Rappelez-vous que votre serveur est maintenant en cours d'exécution sur le port sécurisé.
Donc, nous allons dire https://localhost:3443,
et il n'y a pas d'autorisation ici.
Donc, laissez-moi désactiver l'autorisation ici et ensuite envoyer la requête au serveur.
Donc, dans Postman, si cela se produit,
qu'il dit ne pouvait pas obtenir de réponse,
c'est parce que vous exécutez maintenant le serveur sécurisé.
Donc, dans ce cas,
Postman n'acceptera pas le certificat auto-signé qui arrive.
Donc, dans ce cas, ouvrez les paramètres ici et dans les paramètres,
sous le champ Paramètres généraux,
vous verrez cette vérification de certificat SSL.
Désactivez cette option pour que votre Facteur soit prêt à accepter
le certificat auto-signé que nous avons installé côté serveur.
Donc, c'est ainsi que vous serez en mesure de contacter votre serveur sur
le point de terminaison de connexion utilisateur https://localhost:3443.
Donc, lorsque nous essayons de vous connecter maintenant,
vous verrez maintenant que votre demande de publication a été
acceptée avec succès par le serveur
, puis le serveur répond avec les informations de jeton.
Donc, encore une fois, pour vous assurer que Postman vous permet de contacter le serveur sécurisé,
cliquez sur Paramètres et sous Général,
désactivez la validation du certificat SSL.
Donc, une fois que vous vous
connectez, copions le jeton ici.
Donc, je vais copier le jeton ici.
Maintenant, essayons de télécharger le fichier.
Pour télécharger le fichier, comme vous l'avez remarqué,
nous devons télécharger ce fichier à localhost:3443,
et le point de terminaison est ImageUpload.
Pour faire l'ImageUpload ici,
dans l'en-tête, nous devons configurer l'autorisation.
Donc, nous allons configurer l'autorisation,
puis vous direz,
« Porteur », et fournir le jeton a que nous avons obtenu.
Donc, gardez une copie du jeton quelque part et copiez le jeton dans l'en-tête.
Dans le corps, pour télécharger un fichier,
nous utiliserons ce formulaire de données.
Donc, c'est ce qui vous permet de faire le multipart/form-data ici.
Ainsi, lorsque vous cliquez sur le formulaire de données,
vous pouvez ici fournir le fichier que vous vouliez télécharger.
Ainsi, lorsque vous cliquez sur une nouvelle clé ici,
utilisez cette clé comme ImageFile.
Rappelons que lorsque nous avons configuré la méthode post sur le site UploadRouter,
nous avons spécifié en disant télécharger un fichier ImageFile unique.
Donc, c'est la même clé que vous allez utiliser ici.
Ensuite, lorsque vous donnez la clé,
puis la deuxième partie,
vous allez définir ceci de Texte à Fichier ici.
Donc, c'est ce qui vous permet de spécifier le fichier comme valeur pour cette clé particulière.
Donc, alors vous verrez ce bouton à venir disant, « Choisir les fichiers ».
Ainsi, vous pouvez l'ouvrir, puis sélectionner un fichier que vous souhaitez télécharger.
Donc, ici, je vais aller à mon,
j'ai un fichier dans un de mes dossiers ici.
Donc, je vais juste aller dans les images d'actifs,
et ensuite nous allons juste télécharger un fichier PNG à partir d'ici.
Donc, vous pouvez dire,
« Télécharger le fichier spécifique. »
Donc, comme vous vous en souvenez,
nous avons configuré notre serveur pour accepter uniquement ImageFile.
Donc, nous allons dire, « Téléchargez ce fichier particulier ».
Ensuite, lorsque vous cliquez sur le bouton Envoyer,
alors remarquez que dans le corps,
vous devez configurer cela avec form-data.
Ainsi, le multipart/form-data, puis la clé est l'ImageFile,
et la valeur est le fichier que vous venez de sélectionner,
puis cliquez sur le bouton Envoyer.
Ainsi, lorsque vous cliquez sur le bouton Envoyer,
le fichier sera téléchargé sur votre serveur
, puis le serveur répondra avec cet objet.
Donc, c'est ce qui est contenu dans l'
objet req.file qui est là sur l'objet request ici.
Donc, ce fichier req.file, comme vous le voyez, contient un nom de champ. Le
nom de champ est ImageFile.
Donc, notez que c'est exactement le même que celui-ci ici.
Le nom d'origine, donc notez que l'expression originalname contient alberto.png,
qui est le fichier que j'ai téléchargé.
Maintenant, vous pouvez voir pourquoi lorsque j'ai configuré
le stockage et le nom de fichier, j'ai défini file.originalname.
Donc, c'est ce qui va être utilisé là-bas.
Vous pouvez voir le type d'encodage,
le type MIME, et la destination, le
dossier dans lequel le fichier a été placé,
ainsi que le chemin réel du fichier ici,
le chemin relatif à partir de la racine du dossier du serveur ici.
Donc, ce chemin indique où le fichier est accessible côté serveur.
Ainsi, si vous configurez les détails d'un plat ou d'un leader, par exemple,
vous utiliseriez simplement la propriété image du leader à images/alberto.png.
Public ne doit pas être utilisé de toute façon car
le dossier public est celui qui agit comme le dossier racine de notre serveur.
Donc, vous avez juste besoin de fournir ces images.alberto.
Ainsi, à partir de ce chemin que vous obtenez,
une fois le fichier téléchargé avec succès,
extrayez cette partie, puis utilisez-le pour l'image dans
votre document JSON qui décrit le leader spécifique.
Donc, c'est comme ça que nous téléchargeons un fichier.
Maintenant, pour vous convaincre que l'amende a été téléchargée,
passons à notre projet.
Aller à notre projet,
dans le dossier public,
vous pouvez maintenant voir qu'il y a un sous-dossier images là-bas.
Dans le sous-dossier images,
vous pouvez voir le fichier alberta.png téléchargé là-bas.
Maintenant, nous pouvons télécharger plus de fichiers ImageFiles sur notre côté serveur.
Maintenant, si vous essayez de télécharger un fichier non-ImageFile,
vous verrez que le serveur n'acceptera pas
un fichier non-ImageFile et répondra ensuite en disant :
« Impossible d'accepter le fichier non-ImageFile ».
C' est ainsi que nous allons configurer notre serveur express
pour accepter les téléchargements d'ImageFiles depuis notre côté client.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu comment nous utilisons
le méta module pour configurer notre serveur express pour
accepter les téléchargements de fichiers sur un point de terminaison /imageUpload Rest API.
Lorsque nous publions sur le point de terminaison,
le fichier est téléchargé dans un dossier spécifié sur le site du serveur.
Avec cela, nous complétons cet exercice.
C' est le bon moment pour vous de faire un commit git avec le message 'file upload'.