ReactJS中调用Google Drive API自动创建文件夹并上传文件求助

1. 确认授权范围配置 #

首先要在Google Cloud Console中为OAuth 2.0客户端设置正确的授权范围，推荐使用**https://www.googleapis.com/auth/drive.file**（仅允许访问应用创建的文件，权限更安全），若需要全量访问可使用https://www.googleapis.com/auth/drive（谨慎使用）。
授权时必须携带access_type=offline和prompt=consent参数，才能获取到刷新令牌，实现后端长期访问用户Drive资源。

2. 后端创建专属文件夹（Node.js示例） #

使用googleapis库完成文件夹创建逻辑，需提前存储用户的刷新令牌：

const { google } = require('googleapis');
const fs = require('fs');

// 初始化OAuth2客户端
const oauth2Client = new google.auth.OAuth2(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.REDIRECT_URI
);

// 绑定用户刷新令牌（从前端授权回调中获取）
oauth2Client.setCredentials({ refresh_token: USER_REFRESH_TOKEN });

const driveApi = google.drive({ version: 'v3', auth: oauth2Client });

// 创建用户专属文件夹
async function createUserFolder(userId) {
  try {
    const folderMeta = {
      name: `用户专属文件夹_${userId}`,
      mimeType: 'application/vnd.google-apps.folder'
    };
    const result = await driveApi.files.create({
      resource: folderMeta,
      fields: 'id'
    });
    return result.data.id; // 返回文件夹ID，用于后续上传
  } catch (err) {
    console.error('创建文件夹失败:', err);
    throw err;
  }
}

3. 上传文件到指定文件夹 #

拿到文件夹ID后，执行文件上传逻辑：

async function uploadFileToFolder(localFilePath, targetFolderId, fileName) {
  try {
    const fileMeta = {
      name: fileName,
      parents: [targetFolderId] // 指定父文件夹
    };
    const media = {
      mimeType: 'application/octet-stream', // 根据实际文件类型调整
      body: fs.createReadStream(localFilePath)
    };
    const result = await driveApi.files.create({
      resource: fileMeta,
      media: media,
      fields: 'id'
    });
    return result.data.id;
  } catch (err) {
    console.error('上传文件失败:', err);
    throw err;
  }
}

4. 前端React授权流程 #

引导用户完成OAuth授权，将授权码传给后端换取令牌：

import { useEffect } from 'react';

function GoogleAuthBtn() {
  const startAuth = () => {
    const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
    const redirectUri = process.env.REACT_APP_REDIRECT_URI;
    const scope = 'https://www.googleapis.com/auth/drive.file';
    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&access_type=offline&prompt=consent`;
    window.location.href = authUrl;
  };

  // 处理授权回调，传递授权码到后端
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const authCode = params.get('code');
    if (authCode) {
      fetch('/api/google/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: authCode })
      })
      .then(res => res.json())
      .then(() => {
        localStorage.setItem('driveAuth', 'authorized');
        window.location.href = '/';
      });
    }
  }, []);

  return <button onClick={startAuth}>授权访问Google Drive</button>;
}

export default GoogleAuthBtn;

常见问题排查 #

• 检查Google Cloud Console中OAuth客户端的重定向URI是否和前端配置一致
• 若操作失败，确认授权范围是否足够，以及用户是否完成了权限授予
• 上传文件时需匹配正确的mimeType，避免因类型不匹配导致失败
• 确保后端存储的刷新令牌有效，若令牌失效需引导用户重新授权

内容的提问来源于stack exchange，提问作者Ramakanth R Gunishetty