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

Comment télécharger des fichiers sur le serveur à l'aide de l'API Fetch, expliqué de manière simple

Il y a une tâche qui devrait être simple, mais qui mène parfois à des heures de recherche sur le Web: télécharger des fichiers sur le serveur.

Dans ce tutoriel, je vous explique comment le faire en utilisantfetch.

Étant donné un formulaire avec un champ de saisie de fichier:

<input type="file" id="fileUpload" />

Nous attachons unchangegestionnaire d'événements dessus:

document.querySelector('#fileUpload').addEventListener('change', event => {
  handleImageUpload(event)
})

et nous gérons l'essentiel de notre logique dans lehandleImageUpload()fonction:

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

fetch(’/saveImage’, { method: ‘POST’, body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) }

Dans cet exemple, nous POSTONS sur le/saveImagepoint final.

Nous initialisons un nouveauFormDataobjet et nous l'attribuons auformDatavariable, et nous y ajoutons le fichier téléchargé. Si nous avons plus d'un élément d'entrée de fichier, nous en aurions plus d'unappend()appeler.

Ledatavariable à l'intérieur de la secondethen()contiendra les données de retour analysées JSON. Je suppose que votre serveur vous donnera JSON en guise de réponse.

Comment gérer les images téléchargées côté serveur est un sujet différent, sur lequel j'écrirai demain.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: