JavaScript Blob.stream() — читання файлу потоком

Метод stream() повертає потік (ReadableStream) — щоб читати файл шматками, не тримаючи його цілком у пам'яті.

правити

Загальний опис

Це єдиний правильний спосіб обробити великий файл. arrayBuffer() завантажив би гігабайт у пам'ять — потік читає його порціями й забуває прочитане.

Типові задачі: порахувати рядки в величезному CSV, перевірити вміст архіву, порахувати хеш поступово, показати чесний поступ обробки.

Потік можна передати прямо в fetch як тіло запиту — так файл піде на сервер, узагалі не потрапивши в пам'ять цілком.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	76	69	14.1	63	79	—

Підтримка: мобільні переглядачі

Переглядач
	76	76	79	14.5

Підтримка: серверні переглядачі

Переглядач
	16.7.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

async function countLines(file) {
    const reader = file.stream()
        .pipeThrough(new TextDecoderStream())
        .getReader();

    let lines = 0;
    let read = 0;

    while (true) {
        const { value, done } = await reader.read();

        if (done) {
            break;
        }

        lines += (value.match(/\n/g) ?? []).length;
        read += value.length;

        console.log(Math.round(read / file.size * 100) + '%');
    }

    return lines;
}