我确信这有一个简单的答案,但对于我的生活,我无法弄清楚如何去做。
我有以下明确的端点用于上传到Google云端存储。它工作得很好,谷歌api的响应给了我一个独特的文件名,我想传回我的前端:
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;
});
我通过调用一个将文件传递给它的短函数来到达此端点:
function upload(file) {
var data = new FormData();
data.append('file', file);
return fetch(`upload`,{
method: 'POST',
body: data
});
}
const Client = { upload };
export default Client;
这个函数是从我的前端调用的,如下所示:
Client.upload(this.file).then((data) => {
console.log(data);
});
此最终console.log(data)
将响应记录到控制台。但是,我没有看到我在("Unique File Name:" + file.name
)
有没有人对如何从客户端的响应正文中检索此信息有任何建议?
编辑:
当我在console.log中时data
看起来像这样:
编辑2:
答案 0 :(得分:36)
请注意,您正在处理Response object。您需要使用Response.json()
或Response.text()
(或通过其他方法)基本读取响应流,以便查看您的数据。否则,您的响应正文将始终显示为锁定的可读流。例如:
fetch('https://api.ipify.org?format=json')
.then(response=>response.json())
.then(data=>{ console.log(data); })
如果这会给您带来意想不到的结果,您可能需要使用Postman检查您的回复。
答案 1 :(得分:5)
@GabeRogan给了我答案(我有一个错字,正如预期的那样)
这是我的前端更新代码,它返回响应正文文本:
Client.upload(this.file).then(response => response.text())
.then((body) => {
console.log(body);
});
body
是一个字符串,内容为"唯一文件名:[FILE-NAME]"
编辑:
以下是对Fetch API的一个很好的解释,并阅读您从promise对象获得的响应:https://css-tricks.com/using-fetch/
答案 2 :(得分:1)
您还可以使用async / await:
返回json内容时:
Client.upload(this.file).then(async r => console.log(await r.json()))
或仅以文本形式返回:
Client.upload(this.file).then(async r => console.log(await r.text()))