React集成Google Drive：PDF转Base64实现方案及后端需求问询

不需要后端支持，通过前端结合Google Drive API就能完成PDF文件的获取与Base64转换。以下是具体实现步骤：

前提准备 #

1. 确保你的Google Cloud项目已启用Google Drive API（在控制台的API库中搜索启用）
2. 确认picker配置的权限范围足够，需要包含https://www.googleapis.com/auth/drive.readonly（用于读取文件内容）

具体实现代码 #

修改你现有的callbackFunction，添加文件内容获取与Base64转换逻辑：

import React from "react";
import useDrivePicker from "react-google-drive-picker";

function UploadFromGoogle() {
  const [openPicker, authResponse] = useDrivePicker();

  // 将文件二进制内容转为Base64
  const convertBlobToBase64 = (blob) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
  };

  // 通过Google Drive API获取文件二进制内容
  const fetchDriveFile = async (fileId, accessToken) => {
    const response = await fetch(
      `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    );
    return await response.blob();
  };

  const handleOpenPicker = () => {
    openPicker({
      clientId: "eo9uk...dkepvj3t.apps.googleusercontent.com",
      developerKey: "AIzaSyA7lfMNQhE...uk",
      viewId: "DOCS",
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      // 必须添加权限范围，确保能读取文件内容
      scope: "https://www.googleapis.com/auth/drive.readonly",
      callbackFunction: async (data) => {
        if (data.action === "cancel") {
          console.log("用户取消选择");
          return;
        }

        // 处理选中的第一个文件（多文件可循环处理）
        const selectedFile = data.docs[0];
        if (!selectedFile || !authResponse?.access_token) return;

        try {
          // 1. 获取文件二进制Blob
          const fileBlob = await fetchDriveFile(selectedFile.id, authResponse.access_token);
          // 2. 转换为Base64
          const base64Data = await convertBlobToBase64(fileBlob);
          // 3. 这里可以将base64Data传给后端保存，和你之前本地文件的逻辑一致
          console.log("转换后的Base64:", base64Data);
        } catch (error) {
          console.error("文件处理失败:", error);
        }
      },
    });
  };

  return ( 
    <div><button onClick={handleOpenPicker}>从Google Drive选择文件</button></div>  
  );
}

export default UploadFromGoogle;

关键说明 #

• 权限范围：必须在picker配置中添加scope字段，否则无法通过API读取文件内容
• 文件获取方式：使用alt=media参数调用Drive API的Files: get接口，直接获取文件的二进制流，避免跨域问题
• Base64转换：通过FileReader的readAsDataURL方法将Blob转换为Base64格式，和你之前处理本地文件的逻辑完全兼容

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