如何将React网站对接Google Drive存储用户上传的文件？

以下是可直接落地的实现方案，全程避开零散资料里没讲清的权限坑、前端泄露密钥的安全问题：
核心原则：绝对不要把Google Drive相关的密钥、服务账号凭证打包进React前端代码，前端代码可被任意用户通过F12调试工具拿到，凭证泄露会导致你的云资源被盗用、文件被恶意篡改删除。

根据你的业务场景二选一即可：

• 如果需要把文件统一上传到你自己/团队持有的Google Drive账号：采用「前端收文件 → 发请求到自有后端 → 后端调用Google Drive接口上传」的架构，凭证只存在后端
• 如果需要让用户把文件上传到他们自己的Google Drive账号：可以不用搭后端，前端直接接入Google官方身份授权服务，弹OAuth窗让用户给你的站点授权自己的Drive权限即可

下面是最常用的「上传到自有Drive」场景的完整步骤： #

第一步：Google Cloud侧基础配置 #

• 打开Google Cloud控制台，新建项目，搜索并启用「Google Drive API」服务
• 进入「凭据」页面，创建服务账号，创建完成后下载该服务账号对应的JSON格式密钥文件，这个文件只能存在后端服务的服务器上，禁止提交到前端代码仓库、禁止打包进前端构建产物
• 打开你要存储上传文件的目标Google Drive文件夹，把刚才创建的服务账号邮箱添加为文件夹协作者，授予「编辑」权限，否则服务账号没有写入权限
• 从目标文件夹的网页端地址栏复制文件夹ID：URL中folders/后面的字符串就是文件夹ID，后续上传代码里要用到

第二步：后端接口实现（以Node.js为例，其他后端语言逻辑完全一致） #

• 安装必要依赖：
  npm install googleapis multer express
  其中googleapis是Google官方的API客户端，multer用来接收前端传过来的文件流
• 初始化Drive客户端：

const { google } = require('googleapis');
const multer = require('multer');
const express = require('express');
const app = express();
// 配置multer用内存存储即可，不需要把文件临时存到服务器本地
const upload = multer({ storage: multer.memoryStorage() });

// 初始化授权，密钥文件路径填你刚才下载的服务账号JSON文件的实际路径
const auth = new google.auth.GoogleAuth({
  keyFile: './service-account-key.json',
  scopes: ['https://www.googleapis.com/auth/drive.file'] // 最小权限原则，只申请文件写入权限
});
const drive = google.drive({ version: 'v3', auth });

• 写文件上传接口：

app.post('/api/upload-to-drive', upload.single('uploadFile'), async (req, res) => {
  try {
    const file = req.file;
    // 调用Drive接口上传文件
    const uploadResp = await drive.files.create({
      requestBody: {
        name: file.originalname, // 用用户上传的原文件名
        parents: ['替换成你之前复制的目标文件夹ID'],
      },
      media: {
        mimeType: file.mimetype,
        body: file.buffer, // 直接传内存里的文件流
      },
      fields: 'id,webViewLink' // 只返回需要的字段：文件ID、网页预览链接
    });

    // 如果需要让拿到链接的所有人都能访问文件，加这段配置公开权限
    await drive.permissions.create({
      fileId: uploadResp.data.id,
      requestBody: {
        role: 'reader',
        type: 'anyone'
      }
    });

    // 把上传结果返回给前端
    res.json({
      success: true,
      fileId: uploadResp.data.id,
      fileUrl: uploadResp.data.webViewLink
    })
  } catch (err) {
    res.status(500).json({ success: false, msg: err.message })
  }
})

app.listen(3001, () => console.log('后端服务启动在3001端口'))

第三步：React前端侧改造 #

你已经实现了文件选择/上传的基础逻辑，只需要把拿到的File对象通过FormData发给刚才写的后端接口即可，不需要额外引入复杂依赖：

// 你现有的文件选择处理函数里补充上传逻辑
const handleFileUpload = async (selectedFile) => {
  const formData = new FormData();
  formData.append('uploadFile', selectedFile);

  try {
    const res = await fetch('http://你的后端服务地址/api/upload-to-drive', {
      method: 'POST',
      body: formData
      // 注意不要手动设置Content-Type，浏览器会自动带multipart/form-data的边界参数
    });
    const result = await res.json();
    if (result.success) {
      console.log('上传成功，文件链接：', result.fileUrl);
      // 这里可以把文件链接存到你的业务数据库，或者展示给用户
    }
  } catch (err) {
    console.error('上传失败：', err);
  }
}

常见踩坑排查 #

• 报403权限错误：先检查服务账号有没有被加为目标文件夹的协作者，检查API有没有启用，检查scopes配置是否正确
• 大文件上传超时：单文件超过100MB时不要用上面的整文件上传逻辑，换成Google Drive提供的分片上传接口，支持断点续传
• 上传的文件自己打不开：检查有没有配置文件的公开权限，或者检查访问文件的账号有没有被加为协作者
• 凭证泄露应急：如果服务账号JSON密钥不小心泄露，立刻去Google Cloud控制台删除该密钥，重新生成新的密钥替换，避免被恶意调用产生费用

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