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

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

правити

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

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

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

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

правити

Порада

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

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

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

Переглядачі

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

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

Переглядач
slice	20+	13+	8+	12.1+	12+	10+

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

Переглядач
slice	4.4+	yes	yes	8+

Приклади

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

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) + '%');
    }
}