Файл

Интерфейс Blob представляет собой объект, похожий на файл, содержащий неизменяемые сырые данные; их можно читать как текстовые или двоичные данные, или преобразовать в ReadableStream, чтобы использовать его методы для обработки данных.

Файлы могут представлять данные, которые не обязательно находятся в формате, поддерживаемом JavaScript. Интерфейс File основан на Blob, наследуя функциональность файлов и расширяя её, чтобы поддерживать файлы на компьютере пользователя.

Для создания Blob из других объектов, не являющихся файлами, и данных используйте конструктор Blob(). Чтобы создать файл, содержащий часть данных другого файла, используйте метод slice(). Чтобы получить объект Blob для файла на файловой системе пользователя, см. документацию File.

API, принимающие объекты Blob, также перечислены в документации File.

Blob()

Возвращает новый объект Blob, содержащий конкатенацию всех данных в массиве, переданном в конструктор.

Blob.size Только для чтения

Размер в байтах данных, содержащихся в объекте Blob.

Blob.type Только для чтения

Строка, указывающая MIME-тип данных, содержащихся в Blob. Если тип неизвестен, эта строка пустая.

Blob.arrayBuffer()

Возвращает обещание, которое разрешается объектом ArrayBuffer, содержащим всё содержимое Blob в виде двоичных данных.

Blob.bytes()

Возвращает обещание, которое разрешается объектом Uint8Array, содержащим содержимое Blob.

Blob.slice()

Возвращает новый объект Blob, содержащий данные в заданном диапазоне байтов файла, к которому он применяется.

Blob.stream()

Возвращает ReadableStream, который можно использовать для чтения содержимого Blob.

Blob.text()

Возвращает обещание, которое разрешается строкой, содержащей всё содержимое Blob, интерпретируемой как UTF-8 текст.

Конструктор Blob() может создавать файлы из других объектов. Например, чтобы создать файл из JSON строки:

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

Следующий код создаёт JavaScript типизированный массив и создаёт новый Blob, содержащий данные типизированного массива. Затем он вызывает URL.createObjectURL(), чтобы преобразовать файл в URL.

HTML

<p>
  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.
</p>

JavaScript

Основная часть этого кода для примера — функция typedArrayToURL(), которая создаёт Blob из заданного типизированного массива и возвращает URL-адрес объекта для него. После преобразования данных в URL-адрес объекта, он может быть использован различными способами, включая в качестве значения атрибута <img> элемента src (разумеется, предполагая, что данные содержат изображение).

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "View live result of the example code above";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");

  const link = document.createElement("a");
  link.href = url;
  link.innerText = "Open the array URL";

  document.body.appendChild(link);
}

Результат

Один из способов чтения содержимого из Blob — использование FileReader. Следующий код считывает содержимое Blob как типизированный массив:

const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

Другой способ чтения содержимого из Blob — использование Response. Следующий код считывает содержимое Blob как текст:

const text = await new Response(blob).text();

Или используя Blob.text():

const text = await blob.text();

Используя другие методы FileReader, можно прочитать содержимое файла как строку или URL данных.

• FileReader
• File
• URL.createObjectURL()
• Использование файлов из веб-приложений