Tengo el siguiente punto final expreso para cargar en el almacenamiento de Google Cloud. Funciona muy bien y la respuesta de la API de Google me da un nombre de archivo único que quiero pasar a mi front-end:
app.post('/upload', (req, res) => { var form = new formidable.IncomingForm(), files = [], fields = []; form .on('field', function(field, value) { fields.push([field, value]); }) .on('file', function(field, file) { files.push([field, file]); }) .on('end', function() { console.log('-> upload done'); }); form.parse(req, function(err, fields, files){ var filePath = files.file.path; bucket.upload(filePath, function(err, file, apiResponse){ if (!err){ res.writeHead(200, {'content-type': 'text/plain'}); res.end("Unique File Name:" + file.name); }else{ res.writeHead(500); res.end(); } }); }); return; });Alcanzo este punto final llamando a una función corta que le pasa el archivo:
function upload(file) { var data = new FormData(); data.append('file', file); return fetch(`upload`,{ method: 'POST', body: data }); } const Client = { upload }; export default Client;Esta función se llama desde mi interfaz de esta manera:
Client.upload(this.file).then((data) => { console.log(data); }); Este console.log(data) registra la respuesta a la consola. Sin embargo, no veo en ninguna parte la respuesta que escribí ( "Unique File Name:" + file.name )
¿Cómo puedo recuperar esta información del cuerpo de respuesta en el lado del cliente?
Los data se ven así cuando los consuelo.
Esta es la respuesta que recibo cuando ENVÍO un archivo a mi terminal usando Postman:
Observe que está tratando con un objeto de respuesta . Básicamente, debe leer el flujo de respuesta con Response.json() o Response.text() (o mediante otros métodos) para ver sus datos. De lo contrario, el cuerpo de su respuesta siempre aparecerá como un flujo legible bloqueado. Por ejemplo:
fetch('https://api.ipify.org?format=json') .then(response=>response.json()) .then(data=>{ console.log(data); })Si esto le da resultados inesperados, es posible que desee inspeccionar su respuesta con Postman .
Tuve un error tipográfico en mi código como lo señaló GabeRogan en este comentario :
bien impresionante Para ser honesto, no tengo absolutamente ninguna idea de por qué te estás volviendo indefinido, excepto que podría ser algún tipo de error ortográfico.
Aquí está mi código actualizado para el front-end que devuelve el texto del cuerpo de la respuesta:
Client.upload(this.file).then(response => response.text()) .then((body) => { console.log(body); }); body es una cadena que dice Unique File Name: [FILE-NAME]
Aquí hay una buena explicación de Fetch API y la lectura de la respuesta que obtiene del objeto de promesa: Css tricks: Using Fetch .
También puede usar async/await:
Al devolver contenido json:
Client.upload(this.file).then(async r => console.log(await r.json()))o simplemente regresando en forma de texto:
Client.upload(this.file).then(async r => console.log(await r.text()))