Comment puis-je télécharger des fichiers à l'aide de l'API JavaScript Fetch ?

Télécharger des fichiers à l'aide de l'API JS Fetch : dévoiler les secrets

Comprendre comment télécharger des fichiers avec l'API JS fetch peut être une tâche ardue. Pour clarifier ce concept, nous allons détailler comment envoyer un fichier pour téléchargement lors de la capture de l'événement de soumission.

Tout d'abord, rappelez-vous que la balise input nous permet de sélectionner un fichier (ou même plusieurs) à l'aide de l'entrée file méthode. Pour intercepter l'événement de soumission, vous devrez spécifier le gestionnaire d'événements approprié dans votre code.

Vient maintenant la partie cruciale : l'envoi du fichier à l'aide de fetch. La syntaxe est la suivante :

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

Pour envoyer avec succès un fichier, nous devons remplir la propriété body avec les données du fichier et définir l'en-tête Content-Type correct. Voici un extrait de code amélioré qui montre comment procéder :

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

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

Dans ce code, FormData est utilisé pour créer un nouvel objet de données de formulaire et les données du fichier sont ajoutées à l'aide de la méthode append. L'en-tête Content-Type est automatiquement défini sur multipart/form-data, ce qui est requis pour les demandes de téléchargement de fichiers.

Une fois cela en place, votre code peut facilement télécharger des fichiers sur un serveur à l'aide de l'API fetch.

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!