JavaScript Academy · Урок

Загрузка файлов с помощью Fetch

Отправляйте файлы на сервер с помощью FormData.

«Загрузка файлов с помощью Fetch» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Загрузка с помощью сетевого запроса

Чтобы отправить файлы на сервер, отправьте тело FormData методом POST с помощью fetch. Браузер сам выполняет кодирование multipart/form-data, включая содержимое файлов.

Создание FormData

Получите файл из элемента ввода и добавьте его вместе с остальными полями в объект 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'));

Базовый POST

Передайте FormData как body запроса POST, выполненного с помощью fetch. Ответ является обещанием, которое можно получить с помощью await.

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

Не задавайте тип содержимого

Распространённая ошибка — вручную задавать Content-Type. Позвольте браузеру установить этот заголовок, поскольку он должен включать строку-разделитель составного сообщения. Самостоятельная установка нарушает загрузку.

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

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

Чтение ответа

После успешной загрузки проверьте response.ok и разберите тело ответа, часто представленное в формате обмена данными.

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

Обработка ошибок

Оберните вызов в конструкцию try/catch. Учтите, что fetch отклоняет обещание только при сетевых сбоях, поэтому для проверки ошибок ответа нужно проверять response.ok.

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

Загрузка нескольких файлов

Добавляйте несколько файлов с одним ключом с помощью append или переберите список файлов в цикле, чтобы добавить их все.

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

Добавление заголовков, например авторизации

Можно добавлять такие заголовки, как Authorization, но не Content-Type. Тело запроса остаётся объектом FormData.

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

console.log(response.status);

Отправка созданного двоичного объекта

Можно загружать не только выбранные файлы, но и данные, созданные в браузере. Добавьте двоичный объект с именем файла, чтобы отправить созданный документ.

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

Отмена загрузки

Используйте AbortController, чтобы отменить медленную загрузку, например когда пользователь переходит на другую страницу.

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

controller.abort();

Зачем это нужно

Сочетание FormData с сетевыми запросами — современный стандартный способ загружать файлы: добавляйте поля и файлы, отправляйте FormData методом POST и позволяйте браузеру кодировать данные в составной формат с правильным разделителем. Не задавайте тип содержимого вручную, всегда проверяйте response.ok и освобождайте занятые ресурсы.

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

Быстрая проверка

Почему при отправке FormData с помощью fetch следует NOT задавать вручную заголовок Content-Type?

Повторение: загрузка файлов с помощью сетевого запроса

Вы научились отправлять файлы на сервер:

Добавляйте файлы и поля в FormData, а затем передавайте его как body запроса fetch.
Никогда не задавайте Content-Type вручную: браузер добавляет разделитель составного сообщения.
Проверяйте response.ok, поскольку fetch отклоняет обещание только при сетевых ошибках.
Можно отправлять несколько файлов и созданные двоичные объекты, а также отменять загрузки с помощью AbortController.

Часто задаваемые вопросы

Урок «Загрузка файлов с помощью Fetch» бесплатный?

Да — полный текст урока «Загрузка файлов с помощью Fetch» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Загрузка файлов с помощью Fetch»?

Отправляйте файлы на сервер с помощью FormData. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Загрузка файлов с помощью Fetch»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy