[MUSIC]
Les téléchargements de fichiers sont une fonctionnalité commune prise en charge par de nombreux serveurs.
Ainsi, lorsque vous remplissez un formulaire par exemple, vous pouvez avoir un champ là
où vous remplissez un nom de fichier, puis téléchargez ce fichier sur le côté serveur.
Par exemple,
supposons que vous téléchargez les informations sur un plat sur le côté serveur.
Ensuite, vous voudrez également télécharger l'image correspondante du plat
sur le côté serveur.
Donc, dans le processus, vous allez d'abord télécharger l'image du plat sur le côté serveur,
obtenir une URL pour
cette image du côté serveur partout où elle est téléchargée et stockée,
puis utiliser cette image dans le document JSON qui décrit le plat en détail.
Par la suite, lorsque les clients récupèrent le document JSON décrivant
le plat afin de rendre l'interface utilisateur, puis, à partir du document JSON, ils seront
en mesure d'obtenir l'URL de l'image plat qui a été téléchargée sur le côté serveur.
Et puis utilisez-le dans la construction de l'interface utilisateur.
Donc, dans les exemples que nous avons vus jusqu'à présent, quand nous avons regardé les détails d'
un plat, nous avons vu qu'il y a une image remplie là, qui est une chaîne,
qui n'est rien d'autre que l'URL de cette image correspondant à ce plat spécifique.
Ou la promotion ou le lecteur que nous avons construit dans notre serveur API REST.
Maintenant, dans cette conférence, nous allons en apprendre plus sur le téléchargement de fichiers.
Comment est-il pris en charge dans un serveur ?
Et puis comment nous pouvons tirer parti d'un module de nœud
qui nous permet de prendre en charge le téléchargement de fichiers.
Les téléchargements de fichiers sont généralement pris en charge par le biais d'une entrée de formulaire.
Donc, dans une entrée, si vous spécifiez le type comme fichier et
le nom comme le nom du champ là,
alors vous serez en mesure de fournir le fichier qui sera téléchargé
lorsque vous cliquez sur ce bouton soumettre pour ce formulaire particulier ici.
Maintenant, lorsque les informations de fichier sont téléchargées sur le côté serveur,
les données de formulaire elles-mêmes sont généralement codées comme
application/x-www-form-urlencoded ou multipart/form-data.
Donc, vous concevez votre formulaire, par exemple, vous allez concevoir votre formulaire avec l'
action définie sur /imageUpload à l'inclinaison de l'API REST,
qui agira comme le point final vers lequel vous faites le post de l'image.
Donc, cette méthode correspondante serait post, et le type d'encodage,
vous le définiriez sur multipart/form-data dans votre formulaire.
Cela signifie donc que les éléments de formulaire seront encodés dans le type d'encodage,
puis téléchargés sur le côté serveur.
Le téléchargement de fichiers est plus efficace avec les données multipart/form-data. C'
est donc l'approche préférée que nous utilisons pour télécharger des fichiers.
Maintenant, si vous voulez en savoir plus sur le téléchargement de fichiers et le
téléchargement de formulaires et l'application application/x-www-form-urlencoded ou
le multipart/form-data, alors vous pouvez lire le HTML5
(recommandation W3C) où les détails sont donnés,
ainsi que la requête IETF correspondante pour commenté documents.
J' ai des liens vers ceux-ci dans les ressources supplémentaires au cas où vous souhaitez en
savoir plus sur les détails réels de la façon dont ces types d'encodage de formulaire sont pris en charge.
De notre point de vue, lorsque nous utilisons le multipart/form-data,
lorsque cela est inclus dans un
message de requête HTTP qui va vers le côté serveur, alors dans l'en-tête du message de requête,
vous aurez un type de contenu défini sur multipart/form-data.
Et puis aussi une valeur de limite configurée comme ça.
La limite sépare les différentes parties du corps de la demande.
Ainsi, le corps de la requête lui-même du message de demande sortant sera
divisé en plusieurs parties.
Et chaque partie sera délimitée de la partie précédente
en utilisant cette limite ici.
Maintenant, afin de vous illustrer davantage les détails, j'ai truqué
le serveur pour imprimer cette information à partir du message de demande entrante.
Pour que nous puissions l'examiner un peu plus en détail. En
regardant les détails d'
un message spécifique que j'ai envoyé de mon facteur au côté serveur,
vous pouvez remarquer qu'ici, j'ai imprimé les en-têtes de requête ici.
Et en particulier, dans l'en-tête de la requête, permettez-moi d'attirer votre attention sur cet en-tête
ici, appelé type de contenu, qui est défini sur multipart/form-data.
Et puis notez en particulier la limite définie ici
avec ce nombre long ici.
Donc, c'est l'en-tête de requête pour
le message de demande entrant que j'ai posté en utilisant la méthode post.
En fait, c'est exactement le message de demande que je vais utiliser
dans l'exercice qui suit cette conférence afin de télécharger le fichier.
Donc, quand nous téléchargeons ce fichier là, d'accord, vous remarquerez que dans
le corps de la requête, donc c'est là que j'affiche le corps de la requête ci-dessous.
Et dans le corps de la requête,
vous remarquerez qu'il imprime cette ligne particulière ici.
Et cela correspond à la limite qui est spécifiée ici.
Donc, cette limite spécifie essentiellement la séparation entre les différentes parties
du corps en plusieurs parties qui fait partie de ce message de requête.
Donc, dans le corps de la requête, vous verrez cela être défini ici.
En outre, vous spécifiez également le même Content-Disposition que form-data,
ce qui signifie qu'ils interpréteront cela comme des données de formulaire et
le nom correspondant a s ImageFile.
Et le nom de fichier lui-même du côté client qui a été téléchargé,
le nom de fichier lui-même est donné ici.
Et puis en bas, il est dit Content-Type : image/png.
Donc, je télécharge ce fichier image PNG ici.
Donc, ce sont les détails qui sont décrits ici.
Et lorsque vous faites défiler vers le bas dans le corps de la requête lui-même,
vous verrez les détails de ce qui est inclus dans le corps de la requête.
Donc, ceci à l'intérieur du fichier PNG ici, vous verrez cette information dans le fichier PNG.
Donc, si vous ouvrez le fichier PNG, c'est ce que vous verrez ici.
Donc, cela contient tout un tas de caractères ici,
qui évidemment à l'écran ne peuvent pas être imprimés.
Donc, lorsque vous faites défiler vers le bas, vous allez tout cet ensemble d'informations,
qui est en fait ce qui est contenu dans le corps de la requête du
message qui télécharge ce fichier particulier sur le côté serveur.
Donc, vous voyez que ce corps contient en fait la version encodée
de l'image là-bas.
Et c'est la fin de la limite pour ce corps de requête.
Donc, dans notre message de demande, nous avons juste un fichier inclus ici.
Vous pouvez également télécharger plusieurs fichiers si vous le souhaitez.
Mais alors, vous devez configurer le module npm de manière appropriée pour
accepter plusieurs fichiers.
Donc, c'est ainsi que votre corps de requête contient lui-même la version encodée
de l'image, à partir de laquelle votre serveur va extraire l'image,
puis l'enregistrer dans le fichier avec le même nom de fichier côté serveur.
C' est ainsi que nous allons configurer notre application, l'application côté serveur,
à faire dans l'exercice qui suit cette conférence.
J' ai donc pensé que ce serait une
étape intéressante pour vous illustrer exactement ce que mon serveur reçoit.
Et donc cela dira pourquoi nous spécifions cette limite ici.
Et comment, dans le corps de la requête lui-même,
nous utilisons la limite pour délimiter les différentes parties du corps de la requête.
Ainsi, le côté serveur, lorsqu'il traite,
sera en mesure d'extraire les données d'image du corps de la requête de manière appropriée,
puis d'enregistrer le fichier image côté serveur.
Donc, tout comme j'ai illustré dans le terminal,
cette limite sépare la partie de requête multipass.
Et donc vous avez vu la limite spécifiée là.
Afin de travailler avec les données de formulaire en plusieurs parties contenues dans le corps de la requête,
nous allons utiliser un module NPR qui prend en charge le traitement
des données de formulaire en plusieurs parties incluses dans le corps de la requête.
Il va extraire automatiquement tout pour vous,
puis le charger sur deux objets de l'objet requête côté serveur.
Donc, ce module npm appelé Multer, qui lorsqu'il est installé
sur votre application côté serveur et
configurer votre serveur express pour utiliser Multer.
Ensuite, vous serez en mesure de traiter le message de demande entrante qui
contient ce multipart/form-data dans le message de demande.
Donc Multer est le module de nœud où cela
aidera le serveur à gérer multipart/form-data.
Ceci est écrit sur un autre module npm appelé busboy.
Busboy est un module qui traite les données de formulaire HTML entrantes, les données générales de formulaire HTML.
Et un particulier, Multer met sur busboy pour vous permettre de
traiter plusieurs parties /form-data sur votre serveur.
Maintenant, quand il analyse ces informations, Multer va
charger les données de formulaire entrantes et il ajoute un objet body à la req.
Ainsi, vous aurez un objet req.body et aussi un objet req.file.
Si vous téléchargez un seul fichier, alors il continuera req.file objet.
Ensuite, si vous configurez votre Multer pour accepter plusieurs téléchargements de fichiers,
vous pouvez configurer l'objet req.files.
L' objet files sera un tableau qui contient toutes les informations pour
chaque fichier particulier qui est téléchargé sur le côté serveur.
L' objet fichier lui-même contient des informations qui résument
la façon dont le fichier est enregistré côté serveur par Multer.
Avec cette compréhension rapide du fonctionnement du téléchargement de fichiers,
passons à l'exercice où nous allons réellement configurer le module Multer.
Et puis utilisez-le dans notre application express pour gérer les téléchargements
de fichiers du côté client.
[ MUSIQUE]