使用JSON API向GCS上传Base64图片失败，请求体格式存疑

你遇到的问题核心在于请求体格式和GCS的uploadType=media要求完全不匹配——这就是图片无法正常显示的根本原因：

当使用uploadType=media上传文件时，GCS期望接收的是原始的二进制文件内容，但你现在把Base64字符串包裹在JSON对象里发送，同时还设置了Content-Type: image/jpeg，这就产生了致命矛盾：请求体实际是JSON文本格式，但你告诉GCS这是JPEG二进制数据，GCS自然无法正确解析，最终存储的是无效的JSON文本，而非图片文件。

修正步骤 #

1. 将Base64字符串解码为二进制Blob #

首先需要把Base64字符串转换成GCS能识别的二进制格式。注意如果你的imageBase64包含前缀（比如data:image/jpeg;base64,），必须先去掉这部分，否则解码会失败。

2. 调整请求配置 #

• 直接将Blob作为请求体，不需要用JSON.stringify包裹
• 确保Content-Type和图片实际类型严格匹配（比如image/jpeg或image/png）

修正后的代码示例 #

// 处理Base64字符串：去掉前缀（如果存在的话）
const base64WithoutPrefix = imageBase64.replace(/^data:image\/jpeg;base64,/, '');

// 解码Base64为二进制数据
const byteCharacters = atob(base64WithoutPrefix);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const imageBlob = new Blob([byteArray], { type: 'image/jpeg' });

// 发送请求到GCS
fetch(`${gcloud_storage_url}?uploadType=media&name=${name}`, {
  method: 'post',
  headers: {
    'Content-Type': 'image/jpeg',
    'Authorization': `Bearer ${token}`,
  },
  body: imageBlob // 直接传Blob，而非JSON包裹的Base64
})
.then(resp => {
  console.log(resp);
  // 建议在这里检查响应状态码，200/201表示上传成功
})
.catch(err => {
  console.error('上传失败:', err);
});

额外注意事项 #

• 确保你的Bearer Token拥有storage.objects.create权限，否则会返回权限错误
• 如果图片是PNG格式，记得把Content-Type改成image/png，同时修改Base64前缀的替换规则
• 可以用resp.json()查看GCS返回的详细信息，帮助排查后续可能出现的问题

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