Blob
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/file_api/index.md)
Объект Blob
представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в ReadableStream
, таким образом, его методы могут быть использованы для обработки данных.
Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс File
основан на Blob
, наследует функциональность Blob
и расширяет его для поддержки файлов на стороне пользователя.
Использование Blob
Для создания Blob
не из объектов и данных blob, используйте конструктор Blob()
. Чтобы создать blob из подмножества данных из другого blob, используйте метод slice()
. Чтобы получить объект Blob
для файла на файловой системе пользователя, смотрите документацию на File
.
API, принимающие объекты Blob
, также перечислены в документации на File
.
Примечание:
Метод slice()
имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый Blob.
Если указать такие параметры start + length
, которые превышают размер исходного Blob
, то возвращаемый Blob
будет содержать данные от начального индекса (start index) до конца исходного Blob.
Примечание:
Следует помнить ,что метод slice()
имеет сторонние префиксы в некоторых браузерах: blob.mozSlice()
для Firefox 12 и ранее, так же blob.webkitSlice()
в Safari. Старая версия метода slice()
, без сторонних приставок, имеет другой алгоритм и устарела. Поддержка blob.mozSlice()
была убрана в Firefox 30.
Конструктор
Blob(blobParts[, options])
-
Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.
Свойства
Blob.isClosed
Только для чтения Экспериментальная возможность-
Логическое значение, показывающее, вызывался ли метод
Blob.close()
у blob. Закрытый blob не может быть прочитан. Blob.size
Только для чтения-
Размер данных, содержащихся в объекте
Blob
, в байтах. Blob.type
Только для чтения-
Строка с MIME-типом данных, содержащихся в
Blob
. Если тип неизвестен, строка пуста.
Методы
Blob.close()
Экспериментальная возможность-
Закрывает Blob объект, по возможности освобождая занятые им ресурсы.
Blob.slice([start[, end[, contentType]]])
-
Возвращает новый
Blob
объект, содержащий данные в указанном диапазоне байтов исходногоBlob
. Blob.stream()
-
Возвращает
ReadableStream
, который может использоваться для чтения содержимогоBlob
. Blob.text()
-
Возвращает promise, который исполняется с
USVString
, содержащей всё содержимоеBlob
, интерпретируемое как текст UTF-8.
Примеры
Создание Blob
Конструктор Blob() constructor
может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
type: "application/json",
});
Предупреждение:
До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API BlobBuilder
:
var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob("text/xml");
Создание URL для содержимого типизированного массива
Следующий код создаёт типизированный массив JavaScript и создаёт новый Blob
, содержащий данные типизированного массива. Затем вызывается URL.createObjectURL()
для преобразования blob в 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 объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута src
элементов <img>
(конечно, при условии, что данные содержат изображение).
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);
Другой пример
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], { type: "application/octet-binary" }); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
Извлечение данных из Blob
Один из способов прочесть содержимое Blob
– это использовать FileReader
. Следующий код читает содержимое Blob
как типизированный массив.
var reader = new FileReader();
reader.addEventListener("loadend", function () {
// 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
, возможно прочесть содержимое объекта Blob как строку или как URL.
Спецификации
Specification |
---|
File API # blob-section |
Совместимость с браузерами
BCD tables only load in the browser