JavaScript Academy · Leçon

Importer des fichiers avec Fetch

Envoyez des fichiers à un serveur avec FormData.

Importer des fichiers avec Fetch est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Téléverser avec l’API de requêtes réseau

Pour envoyer des fichiers à un serveur, vous envoyez un corps FormData avec fetch en utilisant la méthode POST. Le navigateur gère pour vous l’encodage multipart/form-data, y compris le contenu des fichiers.

Construire le FormData

Récupérez le fichier depuis un champ de saisie et ajoutez-le, avec les autres champs éventuels, à un objet FormData.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

Le POST de base

Passez le FormData comme body d’une requête POST effectuée avec fetch. La réponse est une promesse que vous pouvez attendre avec await.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Ne définissez pas le type de contenu

Erreur courante : définir manuellement Content-Type. Laissez le navigateur le définir, car il doit inclure la chaîne délimiteur du format multipart. Si vous le définissez vous-même, le téléversement échoue.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

Lire la réponse

Vérifiez response.ok et analysez le corps, souvent au format JSON, après un téléversement réussi.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

Gérer les erreurs

Entourez l’appel d’un bloc try/catch. Notez que fetch ne rejette la promesse qu’en cas d’échec réseau : vous devez donc vérifier response.ok pour détecter les statuts HTTP indiquant une erreur.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

Téléverser plusieurs fichiers

Ajoutez plusieurs fichiers sous la même clé avec append, ou parcourez une liste de fichiers pour les ajouter tous.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

Ajouter des en-têtes, comme celui d’authentification

Vous pouvez ajouter des en-têtes tels que Authorization, mais pas Content-Type. Le corps reste le FormData.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

Envoyer un objet binaire généré

Vous pouvez téléverser des données que vous créez dans le navigateur, et pas seulement des fichiers sélectionnés. Ajoutez un objet binaire avec un nom de fichier pour envoyer un document généré.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

Annuler un téléversement

Utilisez un AbortController pour annuler un téléversement lent, par exemple lorsque l’utilisateur quitte la page.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

Pourquoi c’est important

Associer FormData à l’API de requêtes réseau est la méthode moderne et standard pour téléverser des fichiers : ajoutez les champs et les fichiers, envoyez le FormData par POST et laissez le navigateur encoder le format multipart avec le délimiteur approprié. Évitez de définir Content-Type, vérifiez toujours response.ok et libérez les ressources utilisées.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

Vérification rapide

Pourquoi ne devez-vous PAS définir manuellement l’en-tête Content-Type lorsque vous envoyez un FormData par POST avec fetch ?

Récapitulatif : téléverser des fichiers avec fetch

Vous avez appris à envoyer des fichiers à un serveur :

Ajoutez les fichiers et les champs à un FormData, puis passez-le comme body de fetch.
Ne définissez jamais Content-Type manuellement ; le navigateur ajoute le délimiteur multipart.
Vérifiez response.ok, car fetch ne rejette la promesse qu’en cas d’erreur réseau.
Vous pouvez envoyer plusieurs fichiers ou des objets binaires générés, et annuler les téléversements avec AbortController.

Questions Fréquemment Posées

La leçon « Importer des fichiers avec Fetch » est-elle gratuite ?

Oui — le texte complet de « Importer des fichiers avec Fetch » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Importer des fichiers avec Fetch » ?

Envoyez des fichiers à un serveur avec FormData. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Importer des fichiers avec Fetch » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy