JavaScript Academy · Урок

Blob и URL объектов

Создавайте и используйте URL Blob для скачивания.

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

Что такое двоичный объект

Двоичный объект представляет неизменяемые необработанные данные, например содержимое файла, находящиеся в памяти. Файлы — это особый вид двоичных объектов с именем и датой изменения.

Двоичные объекты позволяют создавать, разделять и скачивать двоичные данные в браузере.

Создание двоичного объекта

Создайте двоичный объект из массива частей — строк, буферов и других двоичных объектов — и объекта параметров, задающего тип MIME в type.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Двоичный объект из нескольких частей

Массив частей объединяется по порядку. Можно смешивать строки и типизированные массивы.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Чтение двоичного объекта

Двоичные объекты предоставляют методы на основе обещаний: text(), arrayBuffer() и stream() для чтения содержимого.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Разделение двоичного объекта

blob.slice(start, end) возвращает новый двоичный объект, содержащий часть исходного, не копируя его целиком. Это удобно для пофрагментных загрузок.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Создание адреса объекта

URL.createObjectURL(blob) возвращает короткоживущий адрес, указывающий на двоичный объект в памяти. Его можно использовать как img.src, адрес ссылки href или источник видео.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Предварительный просмотр загруженного изображения

Преобразуйте выбранный файл в адрес объекта и присвойте его элементу изображения для мгновенного предварительного просмотра без обращения к серверу.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Запуск скачивания

Создайте двоичный объект, получите адрес объекта и нажмите временную ссылку с атрибутом download, чтобы сохранить созданный файл.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Освобождение адресов объектов

Адреса объектов удерживают двоичный объект в памяти, пока Вы не вызовете URL.revokeObjectURL(url). Всегда освобождайте адрес, когда он больше не нужен, чтобы избежать утечек памяти.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Двоичные объекты и структурированные данные

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

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Зачем нужны двоичные объекты

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

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

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

Что следует вызвать после использования адреса объекта для скачивания, чтобы освободить память?

Повторение: двоичные объекты и адреса объектов

Вы научились работать с двоичными данными:

new Blob(parts, { type }) создаёт неизменяемые двоичные данные.
Читайте их с помощью text() и arrayBuffer(); разделяйте с помощью slice().
URL.createObjectURL создаёт пригодный для использования адрес blob: для предварительного просмотра и скачивания.
Всегда вызывайте URL.revokeObjectURL после завершения работы, чтобы освободить память.

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

Урок «Blob и URL объектов» бесплатный?

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

Чему я научусь в уроке «Blob и URL объектов»?

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

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

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

Сколько времени занимает урок «Blob и URL объектов»?

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

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

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

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

← Назад к JavaScript Academy