Comment puis-je maîtriser les téléchargements de fichiers à l'aide de l'API JavaScript Fetch ?

Maîtriser le téléchargement de fichiers avec l'API de récupération JS

Naviguer dans l'API de récupération JS peut être intimidant, en particulier lorsqu'il s'agit de télécharger des fichiers. Simplifions ce processus en le décomposant étape par étape.

1. Capturez l'entrée de fichier

Comme démontré dans votre code, utilisez un élément d'entrée de fichier pour permettre aux utilisateurs de sélectionner des fichiers :

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

2. Gérer l'événement de soumission

Attrapez l'événement de soumission (remplacez l'espace réservé par votre gestionnaire d'événement préféré) :

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3. Construisez le corps de la requête

Pour envoyer le fichier à l'aide de fetch, utilisez l'API FormData. Il crée un corps de requête multipart/form-data. Ajoutez le fichier sélectionné (input.files[0]) et toutes les données supplémentaires, telles que les informations utilisateur, à l'objet formData :

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

4. Lancez la demande de récupération

Une fois le corps de la demande prêt, envoyez la demande POST en utilisant fetch, en spécifiant l'URL du point de terminaison («/files») et en fournissant l'objet formData comme corps :

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

Et voilà ! Vous disposez désormais d'un mécanisme de téléchargement de fichiers entièrement fonctionnel utilisant l'API de récupération JS.

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!