En mi aplicación Create-React-App, los usuarios pueden cargar un archivo de tamaños potencialmente grandes. A partir de estos archivos, los fragmento y los cifro (hecho en el cliente para mayor transparencia) mientras están en forma de flujo. Ahora espero enviar esta secuencia a una API externa que acepte un parámetro FormData , es decir, file=FILE .
Actualmente estoy tratando de usar la función de fetch para hacer esto, pero FormData.append() no acepta una secuencia, solo una cadena o un archivo (que no es una opción porque el archivo puede ser enorme,> 1 GB).
¿Hay alguna otra forma en que pueda hacer esto, además de enviarlo a mi servidor para enviarlo a la API? ¡Realmente aprecio cualquier pensamiento/ayuda!
Si es relevante, este es el código que estoy usando ahora para realizar la búsqueda:
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); };EDITAR:
Para cualquier persona interesada, resulta que la creación de un ArrayBuffer utilizando el flujo de resultados no bloquea la página, y la creación de perfiles no muestra un aumento significativo en la memoria, por alguna razón.
No estoy muy seguro de por qué, ¿tal vez el navegador pueda crear temporalmente un archivo en el almacenamiento para reducir el uso de memoria? ¡Agradezco si alguien puede proporcionar una respuesta!
EDITAR 2:
Resulta que la respuesta anterior parece ser engañosa; ver el administrador de tareas del navegador (estoy usando Edge) muestra que todo el archivo está realmente en la memoria, por lo que parece que aún no tengo la respuesta jajaja
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); };prueba esto