Espero que estés teniendo un buen día. Así que estoy usando Fetch API para cargar archivos en el servidor, pero también quiero incluir una cadena como JSON para mi backend. Pero soy incapaz de hacerlo.
En este momento, así es como se ve mi función de carga de archivos. Esto funciona perfectamente si solo quiero cargar un archivo y no incluir una cadena como JSON:
const uploadFile = ( e ) => { const uploadedFile = e.target.files[ 0 ]; const formData = new FormData(); formData.append( 'data', uploadedFile ); const rawResponse = await fetch( '/upload-file', { method: 'POST', body: formData }); }; uploadFile(); Obtener el archivo en mi backend de NodeJS con req.files.data ;
Pero si incluyo una cadena como JSON e intento cargar el archivo, no estoy definido en mi backend de NodeJS. Así es como se ve con una cadena como JSON:
const uploadFile = ( e ) => { const uploadedFile = e.target.files[ 0 ]; const formData = new FormData(); const str = 'from client'; formData.append( 'data', uploadedFile ); const rawResponse = await fetch( '/upload-file', { method: 'POST', body: { file: formData, str } }); }; uploadFile();Ahora, si quiero obtener el archivo en mi backend con:
req.files.file , obtengo undefined .
req.body , obtengo { 'object Object': '' } .
req.files.data , obtengo UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined .
req.body.data , obtengo undefined .
¿Qué está fallando aquí?
lo agrega a FormData , no al cuerpo
const uploadFile = ( e ) => { const uploadedFile = e.target.files[ 0 ]; const formData = new FormData(); const str = 'from client'; formData.append( 'data', uploadedFile ); formData.append( 'str', str ); const rawResponse = await fetch( '/upload-file', { method: 'POST', body: formData }); }; uploadFile();Simplemente agregue el valor al objeto FormData, igual que ya hizo con el archivo
formData.append( 'str', '["some JSON here"]' ); Y luego sigue enviando solo ese objeto, body: formData