Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: resumable upload, HTTP Range, file transfer, chunked upload, resume download

Как реализовать докачку файла при обрыве соединения?

Вопрос проверяет понимание механизмов надежной передачи файлов и умение реализовать возобновляемую загрузку, что критично для приложений, работающих с большими файлами или в нестабильных сетях.

Короткий ответ

Докачку файла реализуют, разбивая файл на части и отслеживая уже загруженные фрагменты. На стороне клиента перед отправкой запрашивают у сервера, сколько байт уже получено, используя заголовок HTTP Range. Сервер должен поддерживать обработку заголовков Range и Accept-Ranges, чтобы возвращать нужную часть файла. На клиенте после обрыва соединения можно возобновить отправку с последнего успешно переданного байта, избегая повторной отправки всего файла.

Длинный ответ

Реализация докачки (resumable upload/download) — это важная функциональность для повышения надежности передачи файлов, особенно в условиях нестабильного интернет-соединения или при работе с большими объемами данных. Основная идея заключается в том, чтобы разбить файл на управляемые части (чанки) и иметь возможность продолжить передачу с места разрыва, а не начинать заново.

Ключевые механизмы

В основе часто лежит протокол HTTP и его спецификация заголовков:

  • Заголовок Range: Клиент может запросить определенный диапазон байтов файла (например, Range: bytes=500-999).
  • Заголовок Accept-Ranges: Сервер сообщает, что поддерживает докачку, отправляя в ответе Accept-Ranges: bytes.
  • Заголовок Content-Range: Сервер указывает, какой именно диапазон байтов возвращается в ответ на запрос с Range (например, Content-Range: bytes 500-999/1500).

Типичный алгоритм для загрузки (Upload)

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

  1. Перед началом загрузки клиент запрашивает у сервера информацию о уже загруженной части файла (например, отправляя хэш файла).
  2. Сервер возвращает размер уже принятых данных (например, в байтах).
  3. Клиент разбивает файл на чанки и начинает отправку с позиции, следующей за уже загруженной.
  4. После успешной отправки каждого чанка клиент обновляет локальный прогресс. При обрыве соединения процесс повторяется с шага 1.

Пример кода (клиентская логика на JavaScript)

Ниже приведен упрощенный пример, демонстрирующий логику возобновляемой загрузки с использованием Fetch API и контроля прогресса.

async function resumeUpload(file, uploadUrl) {
  // 1. Получаем с сервера уже загруженный размер
  const statusResponse = await fetch(`${uploadUrl}/status?fileId=${file.name}`);
  const { uploadedSize } = await statusResponse.json();
  
  // 2. Открываем файл для чтения с нужной позиции
  const chunkSize = 1024 * 1024; // 1 MB
  let startByte = uploadedSize;
  
  while (startByte < file.size) {
    const chunk = file.slice(startByte, startByte + chunkSize);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('fileId', file.name);
    formData.append('startByte', startByte.toString());
    
    try {
      const response = await fetch(uploadUrl, {
        method: 'POST',
        body: formData,
      });
      if (!response.ok) throw new Error('Upload failed');
      // 3. Обновляем прогресс после успешной отправки чанка
      startByte += chunk.size;
      console.log(`Uploaded ${startByte} of ${file.size} bytes`);
    } catch (error) {
      console.error('Chunk upload failed, will retry:', error);
      // Здесь можно добавить логику повторных попыток
      break;
    }
  }
  if (startByte >= file.size) {
    console.log('File upload completed!');
  }
}

Где применяется

Докачка широко используется в облачных хранилищах (Google Drive, Dropbox), торрент-клиентах, системах резервного копирования, стриминговых сервисах для видео и в любых корпоративных приложениях, где передаются большие файлы (логи, архивы, медиафайлы).

Вывод: Реализация докачки необходима для создания отказоустойчивых и пользовательских приложений, работающих с файлами. Её стоит применять всегда, когда есть риск обрыва соединения или когда размер передаваемых данных значителен, чтобы экономить трафик и время пользователя.

Уровень

  • Рейтинг:

    3

  • Сложность:

    6

Навыки

  • JavaScript

    JavaScript

  • Node.js

    Node.js

Ключевые слова

#resumable upload

#HTTP Range

#file transfer

#chunked upload

#resume download

Подпишись на React Developer в телеграм