URL.createObjectURL() - создание временного URL для файла или Blob в JavaScript

URL.createObjectURL() создаёт временный URL для объекта Blob, File или похожего объекта с данными.

Такой URL часто называют blob URL. Он выглядит примерно так:

blob:https://learn-javascript.ru/4f9b1b7c-9f7a-4f2a-8d43-2a2f5a1c9d10

Главная польза: можно передать данные туда, где нужен обычный URL. Например, в src изображения, href ссылки для скачивания или src видео.

Синтаксис

URL.createObjectURL(object)

Где:

object - объект Blob, File или другой поддерживаемый объект с данными

Метод возвращает строку.

const blob = new Blob(["Привет"], {
  type: "text/plain",
});

const url = URL.createObjectURL(blob);

console.log(url); // "blob:..."

Пример с Blob

Blob можно представить как файл в памяти.

const text = "Привет из JavaScript";

const blob = new Blob([text], {
  type: "text/plain",
});

const url = URL.createObjectURL(blob);

console.log(url);

Теперь url можно использовать как адрес к этому текстовому файлу.

Скачивание сгенерированного файла

Один из частых сценариев - создать файл на стороне браузера и дать пользователю скачать его.

const text = "Имя,Возраст\nАнна,25\nИван,30";

const blob = new Blob([text], {
  type: "text/csv",
});

const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "users.csv";
link.click();

URL.revokeObjectURL(url);

Здесь:

Blob хранит содержимое будущего файла
URL.createObjectURL() создаёт временный адрес
link.download подсказывает браузеру имя файла
URL.revokeObjectURL() освобождает временный URL после использования

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

URL.createObjectURL() удобно использовать для предпросмотра файла, который пользователь выбрал через input.

<input class="avatar-input" type="file" accept="image/*">
<img class="avatar-preview" alt="">

const input = document.querySelector(".avatar-input");
const preview = document.querySelector(".avatar-preview");

let currentUrl = null;

input.addEventListener("change", () => {
  const file = input.files[0];

  if (!file) {
    return;
  }

  if (currentUrl) {
    URL.revokeObjectURL(currentUrl);
  }

  currentUrl = URL.createObjectURL(file);
  preview.src = currentUrl;
});

Файл ещё никуда не отправляется. Браузер просто показывает локально выбранное изображение через временный URL.

Зачем нужен URL.revokeObjectURL()

Blob URL занимает ресурсы браузера, пока он существует.

Когда временный адрес больше не нужен, его стоит освободить:

URL.revokeObjectURL(url);

Особенно важно делать это, если URL создаются много раз: например, при частой смене выбранного файла, генерации отчётов или предпросмотре изображений.

let previewUrl = null;

function showFile(file) {
  if (previewUrl) {
    URL.revokeObjectURL(previewUrl);
  }

  previewUrl = URL.createObjectURL(file);
  image.src = previewUrl;
}

Если страница создаёт один URL и сразу использует его для скачивания, revokeObjectURL() можно вызвать сразу после клика по ссылке.

Когда не стоит вызывать revokeObjectURL() слишком рано

Если удалить blob URL до того, как браузер успел им воспользоваться, файл или изображение могут не открыться.

const url = URL.createObjectURL(blob);

image.src = url;

URL.revokeObjectURL(url);

Такой код может быть слишком поспешным: src уже установлен, но изображение ещё может не успеть загрузиться.

Для изображения безопаснее освободить URL после загрузки.

const url = URL.createObjectURL(blob);

image.onload = () => {
  URL.revokeObjectURL(url);
};

image.src = url;

Если нужно, чтобы изображение оставалось доступным дольше, освобождайте URL тогда, когда предпросмотр уже точно больше не нужен.

createObjectURL() не загружает файл на сервер

URL.createObjectURL() работает локально в браузере.

Он не отправляет файл на сервер и не делает сетевой запрос.

const url = URL.createObjectURL(file);

preview.src = url;

Такой URL нужен только для текущей страницы и текущего браузера. Другой пользователь не сможет открыть этот blob:-адрес у себя.

Blob URL не вечный

Blob URL временный.

Он живёт, пока страница открыта и пока браузер хранит связанную с ним информацию. После перезагрузки страницы старый blob:-адрес использовать нельзя.

Поэтому его не сохраняют в базу данных, localStorage или настройки пользователя.

Если нужно сохранить файл надолго, сохраняют сами данные: например, отправляют файл на сервер или хранят исходное содержимое.

Когда это полезно

URL.createObjectURL() используют, когда нужно быстро превратить локальные данные в URL:

показать выбранное изображение до отправки формы
дать скачать сгенерированный текстовый файл
открыть созданный Blob в новой вкладке
показать видео или аудио из выбранного файла
передать файл в элемент, который ждёт URL

Пример с открытием текстового файла в новой вкладке:

const blob = new Blob(["Документ создан в браузере"], {
  type: "text/plain",
});

const url = URL.createObjectURL(blob);

window.open(url);

Для таких сценариев createObjectURL() обычно проще и быстрее, чем превращать файл в строку через FileReader.

Частые ошибки

Забывать освобождать временные URL

input.addEventListener("change", () => {
  const file = input.files[0];

  image.src = URL.createObjectURL(file);
});

Если пользователь много раз выбирает разные файлы, старые URL остаются в памяти.

Лучше хранить текущий URL и освобождать его перед созданием нового.

let currentUrl = null;

input.addEventListener("change", () => {
  const file = input.files[0];

  if (currentUrl) {
    URL.revokeObjectURL(currentUrl);
  }

  currentUrl = URL.createObjectURL(file);
  image.src = currentUrl;
});

Думать, что blob URL можно отправить другому человеку

const url = URL.createObjectURL(file);

console.log(url); // "blob:..."

Этот адрес работает только внутри текущего браузера. Для другого пользователя он бесполезен.

Передавать обычную строку вместо Blob или File

URL.createObjectURL("text"); // TypeError

Сначала нужно создать Blob.

const blob = new Blob(["text"], {
  type: "text/plain",
});

const url = URL.createObjectURL(blob);

Быстрая памятка

URL.createObjectURL() создаёт временный blob: URL
метод принимает Blob, File или другой поддерживаемый объект с данными
результатом будет строка, которую можно использовать в src или href
blob URL работает локально в текущем браузере
метод не отправляет файл на сервер
временный URL не стоит сохранять надолго
после использования вызывайте URL.revokeObjectURL(url)
не вызывайте revokeObjectURL() раньше, чем браузер успел использовать URL

Коротко

URL.createObjectURL() нужен, чтобы временно представить Blob или File как обычный URL. Это удобно для предпросмотра выбранных файлов, скачивания сгенерированных данных и передачи локального файла в элементы вроде img, video или ссылки. Главное - помнить, что такой адрес временный, локальный и его нужно освобождать через URL.revokeObjectURL(), когда он больше не нужен.