Comment envoyer des fichiers à un serveur à l'aide de l'API JavaScript Fetch ?

Comment télécharger un fichier à l'aide de l'API JS Fetch

Le téléchargement d'un fichier via l'API fetch est une technique précieuse pour transmettre des données d'une application Web vers un serveur. En tant que développeur, il est essentiel de comprendre le processus pour gérer efficacement les téléchargements de fichiers.

Considérez le scénario dans lequel vous disposez d'un champ de saisie qui permet aux utilisateurs de sélectionner un fichier :

<input type="file">

Lors de la soumission du formulaire contenant le fichier en entrée, vous devez utiliser fetch() pour transmettre le fichier au serveur. Cependant, cette tâche nécessite une attention particulière à la structure du corps de la requête.

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

Pour construire le corps de la requête, nous exploitons l'interface FormData. Cette interface permet la création d'une collection de paires clé-valeur pouvant inclure des objets fichier.

const formData = new FormData();
formData.append('file', input.files[0]);

Dans le code ci-dessus, nous ajoutons le fichier sélectionné à l'objet FormData à l'aide de la méthode append. Le premier argument représente la clé, tandis que le deuxième argument est l'objet fichier récupéré à partir de l'entrée du fichier.

De plus, vous pouvez inclure d'autres paires clé-valeur dans l'objet FormData si nécessaire. Par exemple, vous pouvez ajouter des données utilisateur :

formData.append('user', 'hubot');

L'objet FormData étant prêt, nous pouvons enfin construire la requête de récupération comme suit :

fetch('/avatars', {
  method: 'POST',
  body: formData
})

Cette requête enverra le fichier sélectionné et toutes les données supplémentaires dans l'objet FormData vers le point de terminaison « /avatars » sur le serveur. Le serveur peut alors traiter le fichier selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!