Node/Express记录正确的响应，但是React前端记录完全不同的东西

Question

我正在制作一个电子商务网站的表单，允许管理员/所有者将图像上传到cloudary。

图像成功上传到cloudary，当我记录响应(console.log(uploadedResponse)在第17行)时，我的后端终端正在打印正确的信息。

我遇到的问题是，当我发送响应到前端时，我没有得到相同的信息。我花了几个小时研究这个问题，回顾了教程和文档，但没有运气。

这是我的server.js代码从后端

const express = require('express');
const server = express();
const cors = require('cors');
const { cloudinary } = require('./utils/cloudinary');
server.use(cors())
server.use(express.json({ limit: '50mb'}))
server.post('/api/upload', async (req, res) => {
try{
const fileString = req.body.data;
const uploadedResponse = await cloudinary.uploader.upload(fileString, {
upload_preset: 'dev_setups'
})

console.log(uploadedResponse);

res.status(200).json(uploadedResponse);
}catch(error){
console.log(error);
res.status(500).json({ message: 'Something went wrong'})
}
})
server.listen(9000, () => {
console.log('server listening on port 9000');
})

这是我的前端表单组件

import React, {useState} from 'react';
const Upload = () => {
const [previewSource, setPreviewSource] = useState('');
const handleChange = e => {
const file = e.target.files[0];
previewFile(file);
}
const previewFile = file => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
setPreviewSource(reader.result);
}
}
const handleSubmit = e => {
e.preventDefault();
if(!previewSource) return;
fetch('http://localhost:9000/api/upload', {
method: 'POST',
body: JSON.stringify({data: previewSource}),
headers: {'Content-Type': 'application/json'}
})
.then(resp => {
console.log('hitting response');
console.log(resp)
})
.catch(error => {
console.log(error);
})
}
return(
<div>
<h1>Upload</h1>
<form onSubmit={handleSubmit}>
<input
type="file"
name='image'
onChange={handleChange}
/>
<button type='submit'>Submit</button>
</form>
{previewSource && (
<img src={previewSource} alt='chosen' />
)}
</div>
)
}
export default Upload;

这是当我在我的后端console.log(uploadedResponse)的响应

{
asset_id: 'f5c8e1d684bb54aa4f3a1d75822f8968',
public_id: 'pictures/yb5snsg0rswrlh1q3utz',
version: 1656310653,
version_id: 'b445893bf893ff2d99cd238b67ffc0e3',       
signature: '0282cd43e314ef0b8afb04106a1ef109aab956d4',  width: 1584,
height: 396,
format: 'png',
resource_type: 'image',
created_at: '2022-06-27T06:17:33Z',
tags: [],
bytes: 601916,
type: 'upload',
etag: 'b9b2383b9be7af4f4d77965789a90cb5',
placeholder: false,
url: 'http://res.cloudinary.com/andrewg0427/image/upload/v1656310653/pictures/yb5snsg0rswrlh1q3utz.png',      
secure_url: 'https://res.cloudinary.com/andrewg0427/image/upload/v1656310653/pictures/yb5snsg0rswrlh1q3utz.png',
folder: 'pictures',
access_mode: 'public',
api_key: '745648355657514'
}

当前端接收到响应时，这是记录到我的devtools终端的内容

Response {type: 'cors', url: 'http://localhost:9000/api/upload', redirected: false, status: 200, ok: true, …}
body: ReadableStream
locked: false
[[Prototype]]: ReadableStream
bodyUsed: false
headers: Headers
[[Prototype]]: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:9000/api/upload"
[[Prototype]]: Response

为什么我没有得到相同的信息，当它被传递到前端?任何和所有的帮助都非常感激!!

Answer 1

在您的客户端响应中，您正在接收作为正文响应的ReadableStream。

为了从ReadableStream访问数据，你需要调用转换方法

const handleSubmit = e => {
e.preventDefault();
if(!previewSource) return;
fetch('http://localhost:9000/api/upload', {
method: 'POST',
body: JSON.stringify({data: previewSource}),
headers: {'Content-Type': 'application/json'}
})
.then((response)=> response.json())
.then(data => {
console.log('hitting response');
console.log(data)
})
.catch(error => {
console.log(error);
})
}

查看我所做的更改.then((response)=> response.json())它正在将你的ReadableStream转换成json数据。