Retool通过JSON Schema Form上传图片至GCS后无法正常显示

问题根因 #

你当前直接把JSON Schema Form返回的data URL字符串（带base64前缀的文本内容）上传到了GCS，存储的对象本质是文本文件，不是二进制图片文件，因此GCS无法识别为图片资源，导致预览和访问失败。

遗漏配置项 #

• 未对表单返回的data URL做base64转二进制的预处理
• 未手动指定GCS对象的Content-Type为图片对应的MIME类型
• 上传内容参数配置错误，直接传入了字符串而非二进制流

解决步骤 #

1. 在Retool的GCS上传query前添加JS预处理逻辑，将data URL转换为二进制Blob对象，示例代码如下：

// 替换为你的表单组件对应字段值
const imageDataUrl = yourFormName.data.image
const [headerPart, base64Content] = imageDataUrl.split(',')
const mimeType = headerPart.match(/:(.*?);/)[1]
const binaryContent = atob(base64Content)
const uint8Array = new Uint8Array(binaryContent.length)
for (let i = 0; i < binaryContent.length; i++) {
  uint8Array[i] = binaryContent.charCodeAt(i)
}
const imageBlob = new Blob([uint8Array], { type: mimeType })

2. 修改GCS上传query配置：

• 上传主体选择预处理后得到的imageBlob二进制对象，不要直接使用表单返回的image字段值
• 在query的元数据配置项中手动添加Content-Type参数，值为上一步提取到的mimeType（如image/jpeg、image/png）

3. 可选排查项：如果配置完上述步骤还是无法访问，可检查访问账号对该GCS对象是否有读取权限，以及对象的存储类是否支持实时访问。
4. 重新提交表单上传图片，即可在GCS中正常预览和访问图片资源。

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito