Загрузка файла через fetch API в JavaScript: подробное руководство

Быстрый ответ

Для загрузки файла через fetch API, код должен выглядеть следующим образом:

const formData = new FormData();
// Замените 'file' на атрибут name вашего элемента input
formData.append('file', fileInput.files[0]);

fetch('/upload', { method: 'POST', body: formData })
  .then(res => res.json())
  .then(data => console.log('Успешно:', data))
  .catch(err => console.error('Ошибка:', err)); // Несмотря на возникновение ошибки, сохраняйте спокойствие

Не забудьте убедиться, что на сервере настроен обработчик для загрузки файлов.

Мультизагрузка файлов

Если в вашем приложении необходимо выполнить загрузку нескольких файлов одновременно, можно использовать FormData:

const formData = new FormData();
for (let i = 0; i < fileInput.files.length; i++) {
  formData.append('files[]', fileInput.files[i]);
  // 'files[]' – это массив файлов, а не единичный элемент.
}

fetch('/multi-upload', { method: 'POST', body: formData })
  // Продолжайте обработку событий с помощью .then и .catch здесь

Профессиональный совет: Если при использовании FormData не указать заголовок Content-Type, браузер автоматически установит нужное значение boundary.

Визуализация

Для наглядной иллюстрации процесса загрузки файла через JS fetch API можно воспользоваться следующей метафорой:

🖼️ Карточка (файл) -> 📫 (Fetch API) -> ✈️ -> 🌐 (HTTP сервер)

Код будет выглядеть так:

fetch('https://destination.url/upload', {
  method: 'POST',
  body: formData // Прикрепляем Карточку
});

По аналогии, можно представить этот процесс как отправку открытки (файла), которую переносит почта (Fetch API) по воздуху (через Интернет) к месту назначения (на HTTP-сервер).

Использование Async/Await и обработка ошибок Fetch

Так же как в море выйти на рейд без спасательного круга опасно, в программировании критически важно обрабатывать ошибки при работе с fetch. Async/await поможет вашему коду стать более читабельным:

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file); // Это ваш спасательный круг.
  
  try {
    const response = await fetch('/upload', { method: 'POST', body: formData });
    const data = await response.json();
    console.log('Успешно:', data);
  } catch (err) {
    console.error('Ошибка "Ковабунга":', err); // Иногда даже лучшие из нас неудачно падают.
  }
}

Необходимо вызвать функцию при событии change – и всё готово!

Изучение fetch() и Blob() изнутри

Управление форматом содержимого

Если вам нужно контролировать формат данных, настройте значение заголовка Content-Type:

fetch('/upload-text', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain'
  },
  body: 'Взлетай, перелетай облака!' // Текст уже в пути.
});

Подробнее об этом расскажет наш спикер на видео

Отправка данных в формате Blob

Для отправки Blob, загружайте его так же, как и обычный файл:

const blob = new Blob(['Супермен в Готэме'], { type: 'text/plain' }); // Клянемся: криптонита здесь нет.
fetch('/upload-blob', { method: 'POST', body: blob });

При использовании fetch, данные в формате Blob воспринимаются как файл.

Обработка ответов сервера

Каждый HTTP-код выдает свою особую историю. Важно корректно обработать все коды состояния, поскольку своевременное и точное общение – это ключ к успеху! Анализируйте форматы данных (будь то JSON или XML) со всем тщательством исследований Шерлока Холмса.

Полезные материалы

1. Использование Fetch API – Web APIs | MDN — изучите, как выполнять загрузку файлов с помощью Fetch.
2. FormData: метод append() – Web APIs | MDN — всё, что нужно знать о добавлении файлов в FormData.
3. Fetch API – Web APIs | MDN — полная документация fetch API для детального изучения.
4. javascript – Как выполнить загрузку файла с помощью JS fetch API? — полезная дискуссия на тему на Stack Overflow.
5. Чтение файлов в JavaScript | Статьи | web.dev — руководство по работе с файлами в JavaScript.
6. GitHub – JakeChampion/fetch: Полифилл для window.fetch на JavaScript — примеры использования fetch для выполнить загрузки файлов.
7. Blob – Web APIs | MDN — подробный материал для понимания работы с fetch и данными в формате Blob.