Загрузка 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);
};
попробуй это