使用Javascript上传图片至Google Cloud Console遇404错误求助

先排查404错误的核心原因 #

• 确认你的Bucket名称正确，且该Bucket已在Google Cloud Storage中创建
• 检查请求URL格式：正确的媒体上传URL应为https://storage.googleapis.com/upload/storage/v1/b/{bucketName}/o?uploadType=media&name={filename}，必须将{bucketName}和{filename}替换为实际值，不能保留占位符
• 若使用Signed URL，需确保URL未过期、参数生成正确

前置配置 #

1. 配置Bucket的CORS规则 #

前端发起跨域请求前，必须给Bucket配置允许当前前端域名的CORS规则。示例配置（保存为cors-config.json）：

[
  {
    "origin": ["https://你的前端域名.com"],
    "method": ["POST", "PUT"],
    "responseHeader": ["Content-Type", "Authorization"],
    "maxAgeSeconds": 3600
  }
]

通过gcloud命令行应用配置：

gcloud storage buckets update gs://你的Bucket名称 --cors-file cors-config.json

2. 选择安全的身份验证方式 #

前端上传不建议直接暴露服务账号密钥，推荐使用Signed URL（由后端生成，授予临时上传权限），或OAuth 2.0用户授权。

实现代码示例 #

方案1：原生JavaScript Fetch API（使用Signed URL） #

// 获取文件输入控件
const fileInput = document.getElementById('image-upload');
fileInput.addEventListener('change', async () => {
  const file = fileInput.files[0];
  if (!file) return;

  // 从后端接口获取有效的Signed URL
  const signedUrl = await fetch('/api/get-signed-url', {
    method: 'POST',
    body: JSON.stringify({ filename: file.name })
  }).then(res => res.text());

  // 发起上传请求
  const uploadRes = await fetch(signedUrl, {
    method: 'PUT',
    body: file,
    headers: {
      'Content-Type': file.type
    }
  });

  if (uploadRes.ok) {
    console.log('图片上传成功');
  } else {
    console.error('上传失败:', uploadRes.statusText);
  }
});

方案2：jQuery AJAX（使用Signed URL） #

$('#image-upload').on('change', function() {
  const file = $(this)[0].files[0];
  if (!file) return;

  // 从后端获取Signed URL
  $.post('/api/get-signed-url', { filename: file.name }, function(signedUrl) {
    $.ajax({
      url: signedUrl,
      method: 'PUT',
      data: file,
      processData: false,
      contentType: file.type,
      success: function() {
        console.log('图片上传成功');
      },
      error: function(xhr, status, err) {
        console.error('上传失败:', status, err);
      }
    });
  });
});

方案3：官方Google Cloud Storage JavaScript客户端库（适合后端或打包后的前端） #

先安装依赖：

npm install @google-cloud/storage

代码示例（注意：前端使用需配合OAuth，不建议直接嵌入服务账号密钥）：

const { Storage } = require('@google-cloud/storage');

// 初始化客户端（生产环境建议用OAuth而非服务账号密钥）
const storage = new Storage({
  projectId: '你的项目ID',
  // keyFilename: 'service-account-key.json' // 仅后端使用
});

const bucket = storage.bucket('你的Bucket名称');

// 处理文件上传
const uploadFile = async (file) => {
  const gcsFile = bucket.file(file.name);
  await gcsFile.save(file);
  console.log('图片上传成功');
};

// 绑定文件输入事件
document.getElementById('image-upload').addEventListener('change', (e) => {
  uploadFile(e.target.files[0]);
});

额外排查点 #

• 若仍出现404：确认Bucket的地域是否与请求URL匹配（默认全局URL是storage.googleapis.com，若Bucket在特定地域，也可使用地域URL如us-central1.storage.googleapis.com）
• 权限错误：检查Signed URL是否授予了WRITE权限，或Bucket是否配置了正确的IAM规则

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