Express上传Cloudinary响应正确但React前端接收内容不符

你的后端代码没有问题，Cloudinary上传和接口返回逻辑都是正常的。前端拿不到对应数据是因为Fetch API不会自动解析响应体内容：你现在打印的resp是Fetch返回的原生Response实例，响应体默认以ReadableStream（可读流）的形式存在，不会直接把后端返回的JSON数据暴露在对象顶层，这就是你看到控制台打印的是流对象、看不到具体返回字段的原因。

你需要手动调用Response对象上的解析方法，把流转换成JS对象，修改前端handleSubmit方法中的fetch回调逻辑即可：

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 => {
        // 调用json()方法解析JSON格式的响应体，该方法返回Promise
        return resp.json();
    })
    .then(uploadData => {
        // 这里拿到的uploadData就是后端返回的完整Cloudinary响应内容
        console.log('上传成功，返回数据：', uploadData);
        // 可直接取需要的字段使用，比如图片访问地址、public_id等
        console.log('图片CDN地址：', uploadData.secure_url);
    })
    .catch(error => {
        console.log('请求/解析失败：', error);
    })
}

如果习惯async/await的同步写法，也可以按下面的方式写，逻辑更清晰：

const handleSubmit = async e => {
    e.preventDefault();
    if(!previewSource) return;
    try {
        const resp = await fetch('http://localhost:9000/api/upload', {
            method: 'POST',
            body: JSON.stringify({data: previewSource}),
            headers: {'Content-Type': 'application/json'}
        })
        const uploadData = await resp.json();
        console.log('上传成功，返回数据：', uploadData);
    } catch (error) {
        console.log('上传失败：', error);
    }
}

• 要根据后端返回的内容类型选择对应的解析方法：返回JSON用resp.json()，返回纯文本用resp.text()，返回二进制文件（图片、下载流）用resp.blob()
• 你之前打印的Response对象上bodyUsed: false字段，也能证明你从未读取过响应体流的内容，调用解析方法后该字段会变为true

内容的提问来源于stack exchange，提问作者user1784446