JavaScript Blob.slice() — частина файлу без завантаження всього

Метод slice() повертає новий блоб із частини цього — так само, як slice() у масиву.

правити

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

Найважливіше: він не читає дані в пам'ять. Це просто посилання на діапазон байтів — миттєве й безкоштовне, навіть для гігабайтного файлу.

Саме на цьому побудоване завантаження великих файлів частинами: ріжемо файл на шматки по кілька мегабайтів і шлемо їх окремими запитами. Обірвалась мережа — продовжуємо з тієї частини, на якій зупинились, а не з початку.

Третім аргументом можна задати новий тип MIME.

правити

Порада

Щоб перевірити сигнатуру формату, не читай увесь файл: await file.slice(0, 8).arrayBuffer() дістане перші вісім байтів гігабайтного відео миттєво.

автор: NagarD правити

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

Переглядачі

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

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

Переглядач
	21	13	7	12	12	10

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

Переглядач
	4.4	25	14	7

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

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

Приклади

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

const CHUNK = 5 * 1024 * 1024; // 5 МБ

async function upload(file) {
    for (let start = 0; start < file.size; start += CHUNK) {
        // не читає в пам'ять — просто посилання на діапазон
        const chunk = file.slice(start, start + CHUNK);

        const data = new FormData();
        data.append('chunk', chunk);
        data.append('offset', String(start));

        await fetch('/api/upload', { method: 'POST', body: data });

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