如何仅使用JavaScript将文件上传至Google Cloud？

完全可以仅使用浏览器端原生JavaScript实现文件上传到Google Cloud Storage，不需要依赖Node.js或者其他额外工具，目前网上大部分教程用Node.js是因为涉及权限鉴权的逻辑默认放在服务端实现，前端本身只需要调用上传接口即可。

核心实现逻辑 #

最安全且生产可用的方案基于Google Cloud Storage 签名上传URL实现：

• 首先在可信环境（云函数、自有后端等）生成针对目标存储路径的签名上传URL，该URL自带权限验证信息，有效期可自定义，不需要在前端暴露任何密钥信息
• 前端拿到签名URL后，直接用原生fetch或者XMLHttpRequest发起PUT请求，把文件作为请求体上传即可

前端代码示例 #

// 绑定文件选择控件
const fileInput = document.querySelector('input[type="file"]');
// 提前从可信环境获取到的GCS签名上传地址
const uploadSignedUrl = '你的签名上传URL';

fileInput.addEventListener('change', async (e) => {
  const targetFile = e.target.files[0];
  if (!targetFile) return;

  try {
    const uploadRes = await fetch(uploadSignedUrl, {
      method: 'PUT',
      body: targetFile,
      headers: {
        'Content-Type': targetFile.type
      }
    });

    if (uploadRes.ok) {
      console.log('文件上传成功');
    } else {
      console.error('上传失败，状态码：', uploadRes.status);
    }
  } catch (err) {
    console.error('上传请求出错：', err);
  }
});

注意事项 #

• 签名URL禁止在前端生成，绝对不要把Google Cloud服务账号密钥写在前端代码中，会导致严重的权限泄露风险，签名URL必须在可信的服务端环境生成后传递给前端使用
• 需要提前在Google Cloud Storage控制台配置对应存储桶的CORS规则，允许你的前端域名发起PUT请求、允许Content-Type头，否则会出现跨域错误
• 大文件上传可以直接用原生JS实现分片逻辑，把文件切分成多个块分别请求对应分片的签名URL上传，最后调用GCS的分片合并接口即可，不需要依赖任何第三方工具
• 不推荐使用公开可写存储桶的方案，该配置会允许任意用户操作存储桶内的所有文件，安全风险极高，仅可用于临时测试场景

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