Как в общих чертах реализовать фоновую загрузку файлов?

Question

[privat13]

Добрый день, друзья. Кто-нибудь уже реализовывал фоновую загрузку файлов в связке vue3 + java + spring + minio?

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

Получается нужен общий прогресс загрузки и прогресс загрузки каждого файла.
Возможно нужно подключить какой-нибудь еще сервис к связке vue3 + java + spring + minio.

Comments

[Dmitry Roo]

«фоновая» она только на стороне пользователя.
На стороне бэк-энда ничего не меняется.

[privat13]

Dmitry Roo, Также нужно отслеживать прогресс загрузки, чтобы он соответствовал действительности.

[Сергей Горностаев]

privat13, тоже полностью зависит от фронта.

[privat13]

Сергей Горностаев, пока не сильно понятно, как фронт сможет отслеживать прогресс загрузки. Есть какой-то функционал для этого во vue3 ?

[Wispik]

privat13, какая библиотека во вью используется для запростов к апи? Если axios, то гуглим
axios progress upload
если вдруг запросы просто через fetch, то гуглим:
XMLHttpRequest progress upload

[Андрей]

privat13, от фреймворка это не зависит, в целом есть несколько способов загружать файлы:
1) Самый простой, с заголовком Content-Type: multipart/form-data. Для этого нужно файлы собрать в объект FormData, а затем оправить через fetch, либо XMLHttpRequest. При таком решении прогресс получится отслеживать только на XMLHttpRequest.
2. Более сложный, через стримы. Любым способом формируете объект ReadableStream, затем отправляете через fetch с опцией duplex: "half" (работает с Chrome > 105). В этом случае можно отслеживать сколько было считано из стрима.

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

function* makeChunks(data: Blob, chunkSize: number) {
  let offset = 0;

  chunkSize = Math.max(Math.min(chunkSize, data.size), 1);

  while (offset < data.size) {
    const chunkIndex = offset / chunkSize;
    const nextOffset = Math.min(offset + chunkSize, data.size);

    const chunk = data.slice(offset, nextOffset);

    yield {
      start: offset,
      end: nextOffset,
      total: data.size,
      index: chunkIndex,
      payload: chunk,
    }

    offset += chunkSize;
  }
}