JavaScript Academy · Lección

Carga de archivos con Fetch

Envíe archivos a un servidor mediante FormData.

Carga de archivos con Fetch es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Carga de archivos con fetch

Para enviar archivos a un servidor, realice una solicitud POST con un cuerpo FormData mediante fetch. El navegador se encarga de la codificación multipart/form-data, incluido el contenido de los archivos.

Creación del FormData

Obtenga el archivo desde un input y añádalo, junto con cualquier otro campo, a un objeto 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'));

El POST básico

Pase FormData como el body de un POST con fetch. La respuesta es una Promise que puede esperar con await.

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

No establezca Content-Type

Un error habitual consiste en establecer manualmente Content-Type. Deje que lo establezca el navegador, ya que debe incluir la cadena boundary de multipart. Si lo establece usted, la carga fallará.

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

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

Lectura de la respuesta

Compruebe response.ok y analice el cuerpo, que suele ser JSON, después de una carga correcta.

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);
}

Gestión de errores

Envuelva la llamada en un bloque try/catch. Tenga en cuenta que fetch solo rechaza la Promise cuando se producen errores de red, por lo que debe comprobar response.ok para detectar estados de error HTTP.

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);
  }
}

Carga de varios archivos

Añada varios archivos con la misma clave mediante append o recorra una lista de archivos para añadirlos todos.

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');

Añadir encabezados como Auth

Puede añadir encabezados como Authorization, pero no Content-Type. El cuerpo sigue siendo FormData.

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

console.log(response.status);

Envío de un Blob generado

Puede cargar datos que cree en el navegador, no solo archivos seleccionados. Añada un Blob con un nombre de archivo para enviar un documento generado.

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');

Cancelación de una carga

Use un AbortController para cancelar una carga lenta, por ejemplo, cuando el usuario abandone la página.

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

controller.abort();

Por qué es importante

Combinar FormData con fetch es la forma moderna y estándar de cargar archivos: añada campos y archivos, envíe FormData mediante POST y deje que el navegador codifique multipart con el boundary correcto. Evite establecer Content-Type, compruebe siempre response.ok y libere los recursos.

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

Comprobación rápida

¿Por qué NO debe establecer manualmente el encabezado Content-Type al enviar un FormData mediante POST con fetch?

Repaso: carga de archivos con fetch

Ha aprendido a enviar archivos a un servidor:

Añada archivos y campos a un FormData y páselo como body de fetch.
No establezca nunca Content-Type manualmente; el navegador añade el boundary de multipart.
Compruebe response.ok porque fetch solo rechaza la Promise cuando se producen errores de red.
Puede enviar varios archivos y Blobs generados, y cancelar cargas con AbortController.

Preguntas frecuentes

¿La lección «Carga de archivos con Fetch» es gratis?

Sí — el texto completo de «Carga de archivos con Fetch» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Carga de archivos con Fetch»?

Envíe archivos a un servidor mediante FormData. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Carga de archivos con Fetch»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy