Я реализовал простую функцию загрузки нескольких файлов с помощью ReactJS во внешнем интерфейсе, используя axios для запросов AJAX.

const FileUploader = () => {

  const uploadFiles = files => {

    const formData = new FormData();
    files.forEach( file => {
      formData.append("files", file );
    })

    axios
    ({
      method: "POST",
      url: '...',
      data: formData,
      headers: { "Content-Type": "multipart/form-data", },
      onUploadProgress: e => console.log(e.loaded, e.total)
    })
    .then(( response ) => console.log( response ))
    .catch(( error )   => console.error( error ))
  }

  return (
   
    <input type="file" onChange={ e => uploadFiles( e.target.files ) } />

  )
}

Я заметил, что при одновременной загрузке больших или многих файлов не только браузер, но и моя ОС тормозит.

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

https://developer.mozilla.org/en-US / docs / Web / API / Streams_API

Streams API позволяет JavaScript программно получать доступ к потокам данных, полученных по сети, и обрабатывать их по желанию разработчика.

https://developer.mozilla.org/en -US / docs / Web / API / Streams_API / Using_readable_streams

https://developer.mozilla.org/en-US / docs / Web / API / WritableStream

Однако в Интернете я вижу очень мало ресурсов по этой теме, вероятно, потому, что Streams API - это относительно новое введение в Интернет, которое все еще является экспериментальным.

Есть много статей, объясняющих реализацию в бэкэнде, но очень мало статей во фронтенде.

С чего бы мне начать? Как может выглядеть код?

0
anonym 7 Сен 2020 в 07:34

1 ответ

Лучший ответ

Обратите внимание, что потоки предназначены для чтения / обработки файла на клиенте, а не для загрузки.

Поскольку потоки доступны для JavaScript, все это меняется - вы можете теперь начните обрабатывать необработанные данные с помощью JavaScript по крупицам, как только он доступен на стороне клиента без необходимости создания буфера, строка или капля.

Однако вы можете получить фрагментированную загрузку с помощью XHR. Есть несколько библиотек, которые его поддерживают.

Для React есть react-uploady. Ознакомьтесь с его поддержкой по частям. Он также поддерживает возобновляемые загрузки (Tus). для серверов, которые также реализуют протокол

1
poeticGeek 7 Сен 2020 в 06:34