Быстрая загрузка BLOB-объектов

Question

Я использую этот код для загрузки файлов из моего веб-интерфейса:

function download(name){
    axios.get(api + "?filename="+name, { responseType: 'blob' })
        .then(res => {
            let blob = new Blob([res.data]);
            let a = document.createElement("a");
            document.body.appendChild(a);
            a.href = window.URL.createObjectUrl(blob);
            a.download = name;
            a.click();
            window.URL.revokeObjectUrl(url);
            a.remove();
        }
    );
}

При загрузке небольших файлов этот код великолепен, но при загрузке больших файлов (например, 400 МБ) код ожидаетBLOB-объект для чтения всего содержимого и только после этого «запускает загрузку» в менеджере загрузок Chrome, который очень не интуитивно понятен для клиента.

Есть ли способ «потоковой передачи» большого двоичного объекта в файловую систему?вместо того, чтобы ждать, пока файл полностью прибудет в оперативную память моего клиента, и только затем показать загрузку в диспетчере загрузок?

решено

Вместо загрузки файлачерез библиотеку axios я просто указываю браузеру на ссылку для скачивания, поскольку это всего лишь запрос GET.

function download(name){
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.href = api + "?filename="+name;
    a.click();
    a.remove();
}

Просто нужно установить заголовок ContentDisposition на стороне сервера для вложения, а также указать имя файла, посколькуатрибут загрузки иногда почему-то не работает с этим методом.

Также указание ContentLength позволит браузеру оценивать время загрузки

Answer 1

В случае, если вам нужно загрузить ответ на запрос POST или вашему запросу требуется какая-то расширенная аутентификация, вместо использования библиотеки axios вы можете попробовать использовать собственный метод fetch.

fetch(options)
  .then(res => res.blob())
  .then(blob => {
    // use blob
  });

Вы можете просмотреть полный response API здесь .