通过Fetch向Google Cloud Storage签名URL上传图片出现无效资产问题

问题根源 #

你上传的图片显示无效，核心原因是请求体格式错误——签名URL的PUT请求要求直接传递图片的二进制原始数据，而不是JSON字符串、未经转换的base64文本这类非二进制内容。

正确上传方式（两种场景） #

场景1：使用本地URI上传（推荐，性能更优） #

移动端的临时URI是本地图片文件的访问路径，直接用它读取二进制数据上传即可，无需转base64：

// 基于本地URI的上传代码
const asset = {
  uri: 'file:///path/to/local/image', // 你的本地临时路径
  width: 1080,
  height: 1920,
};

// 先将本地URI转为Blob，再作为请求体上传
const imageBlob = await fetch(asset.uri).then(res => res.blob());

await fetch(data.signedUrl, {
  method: 'PUT',
  headers: {
    'Content-Type': mediaInfo.contentType, // 确保和图片类型一致，比如image/jpeg
  },
  body: imageBlob,
});

场景2：使用base64字符串上传 #

如果已经有处理好的base64字符串，必须先把它转成二进制Blob再上传，不能直接传base64文本：

// 基于base64的上传代码
const asset = {
  uri: '...',
  width: 1080,
  height: 1920,
  base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD...', // 带前缀的base64
};

// 移除base64前缀（如果存在），转成二进制Blob
const base64Raw = asset.base64.replace(/^data:image\/\w+;base64,/, '');
const byteChars = atob(base64Raw);
const byteArray = new Uint8Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
  byteArray[i] = byteChars.charCodeAt(i);
}
const imageBlob = new Blob([byteArray], { type: mediaInfo.contentType });

await fetch(data.signedUrl, {
  method: 'PUT',
  headers: {
    'Content-Type': mediaInfo.contentType,
  },
  body: imageBlob,
});

关键注意事项 #

• 禁止直接传JSON或base64字符串：存储桶会把这些内容当作普通文本保存，自然无法识别为有效图片。
• 本地URI的作用：临时路径是系统给本地图片分配的合法访问入口，通过它可以直接读取原始文件数据，比转base64节省内存和时间，优先使用。
• Content-Type必须准确：要确保mediaInfo.contentType和图片实际类型完全匹配（如image/png、image/webp），否则存储桶可能无法正确解析文件。

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