Загрузка ReadableStream как часть FormData из браузера

В моем приложении Create-React-App пользователи могут загружать файлы потенциально больших размеров. Из этих файлов я разбиваю и шифрую их (сделано в клиенте для прозрачности) в виде потока. Теперь я надеюсь отправить этот поток во внешний API, который принимает FormDataпараметр, т.е. file=FILE.

В настоящее время я пытаюсь использовать fetchфункция для этого, но FormData.append()не принимает поток, только строку или файл (это не вариант, потому что файл может быть огромным,>1 ГБ).

Есть ли другой способ сделать это, кроме как отправить его на мой сервер для отправки в API? Очень ценю любые мысли/помощь!

Если уместно, это код, который я использую сейчас для выполнения выборки:

      export const addFilesToDataset = async (result: TransformStream): Promise<void> => {
    // ...
    const formData = new FormData();
    formData.append('file', result); // <- this won't work
    const respData = await fetch(url, {
        method: 'POST',
        body: result.readable,
    });
    const jsonData = await respData.json();
    console.log('Res: ', jsonData);
};

РЕДАКТИРОВАТЬ:

Для всех желающих, оказывается, создание ArrayBufferиспользование потока результатов не приводит к сбою страницы, а ее профилирование по какой-то причине не показывает значительного увеличения объема памяти.

Не совсем понимаю, почему, может быть, браузер может временно создать файл в хранилище, чтобы уменьшить использование памяти? Ценю, если кто-то может дать ответ!

РЕДАКТИРОВАТЬ 2:

Оказывается, предыдущий ответ вводит в заблуждение; просмотр диспетчера задач браузера (я использую Edge) показывает, что весь файл на самом деле находится в памяти, поэтому, похоже, у меня пока нет ответа, лол

1 ответ

      export const addFilesToDataset = async (result: TransformStream): Promise<void> => {
    // ...
    const formData = {
      "file": result
    }
    
    const respData = await fetch(url, {
        method: 'POST',
        body: result.readable,
    });
    const jsonData = await respData.json();
    console.log('Res: ', jsonData);
};

попробуй это

Другие вопросы по тегам