使用PUT签名URL上传至GCP Storage的图片无法通过公网URL查看

通过Node.js生成PUT签名URL上传图片至GCP Storage，上传操作看似成功，但控制台获取的公网URL无法在浏览器中正常显示（浏览器会自动下载，且下载后的文件损坏无法打开）。而直接通过GCP Storage控制台上传的图片，其公网URL可正常在浏览器查看。

已尝试的代码 #

服务端生成PUT签名URL #

import { Storage } from "@google-cloud/storage";

const storage = new Storage({
    projectId: GCP_PROJECT_ID,
    credentials: {
      client_email: GCP_CLIENT_EMAIL,
      private_key: getFormattedGCPPrivateKey(GCP_PRIVATE_KEY),
    },
  });

const gcpFilePath = "path/to/file.jpeg";
const filePath = storage.bucket("test_bucket").file(gcpFilePath);
const [putUrlImage] = await filePath.getSignedUrl({
    version: "v4",
    action: "write",
    expires: Date.now() + 1000 * 30, // 30 seconds
    contentType: "application/octet-stream",
  });

前端上传图片代码 #

const imageAsBlob = "..."; // 格式类似：blob:http://localhost:3000/867eb7e4-064d-4092-85ea-90ceb1160a39

const imageAsBase64 = Buffer.from(
    imageAsBlob.replace(/^data:image\/(png|gif|jpeg);base64,/, ""),
    "base64"
  )

const imageData = 
await axios.put(putUrlImage, imageAsBase64, {
      headers: { "Content-Type": "application/octet-stream" },
   });

问题原因及修复方案 #

1. 签名URL的Content-Type设置错误 #

生成签名URL时指定contentType: "application/octet-stream"，会让GCP Storage将文件标记为二进制流，浏览器访问时默认触发下载而非预览。同时上传时的Content-Type必须和签名时完全一致，且应使用图片实际的MIME类型（如image/jpeg）。

修改服务端代码：

const [putUrlImage] = await filePath.getSignedUrl({
    version: "v4",
    action: "write",
    expires: Date.now() + 1000 * 30, // 30 seconds
    contentType: "image/jpeg", // 根据图片类型替换为image/png、image/gif等
  });

2. 前端图片数据处理错误 #

前端的imageAsBlob是Blob URL（格式为blob:xxx），直接用replace处理Base64前缀无效，因为Blob URL并非Base64字符串。正确做法是将Blob URL转为Blob对象后直接上传。

修改前端代码：

// 将Blob URL转为Blob对象
const response = await fetch(imageAsBlob);
const blob = await response.blob();

// 上传时使用Blob的实际MIME类型，与签名URL中的设置保持一致
const imageData = await axios.put(putUrlImage, blob, {
  headers: { "Content-Type": blob.type },
});

额外注意事项 #

• 若前端是从文件输入框获取图片，直接使用file对象上传更可靠，无需转Base64。
• 如需兼容多种图片类型，可让前端传递图片的MIME类型给服务端，服务端动态生成对应Content-Type的签名URL。

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