如何使用react-google-drive-picker从谷歌云端硬盘获取图片

要从react-google-drive-picker返回的文件信息中获取Blob或File对象，核心问题在于普通的Drive网页链接（view/preview）并非直接的文件资源链接，且存在权限限制。以下是可行的解决方案：

1. 利用Google Drive API获取二进制内容 #

这是最可靠的方式，适用于私有或公开文件，前提是你已获取了正确的授权权限：

• 确保授权范围正确：在初始化react-google-drive-picker时，需包含https://www.googleapis.com/auth/drive.readonly权限（或更宽泛的drive权限，根据需求调整）。
• 调用Files.get接口获取Blob：通过文件ID，结合用户的访问令牌（access token）发起请求，设置alt=media参数直接获取文件二进制内容：

async function fetchDriveFileAsBlob(fileId, fileName, mimeType, accessToken) {
  const apiUrl = `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`;
  const response = await fetch(apiUrl, {
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  });

  if (!response.ok) {
    throw new Error('Failed to fetch file from Google Drive');
  }

  const blob = await response.blob();
  // 转换为File对象（可选）
  const file = new File([blob], fileName, { type: mimeType });
  return file;
}

你可以在react-google-drive-picker的回调函数中拿到accessToken（通常在authResponse字段里），再传入上述函数使用。

2. 处理公开共享文件的简化方式 #

如果你的目标文件是公开可访问的（设置为“Anyone with the link can view”），可以使用以下直接下载链接：

https://drive.google.com/uc?export=download&id=<fileId>

但注意：如果文件较大，Google会触发安全验证页面，导致无法直接通过fetch获取内容。这种情况下，还是推荐使用API方式。

3. 排查react-google-drive-picker配置 #

确认你的picker配置中，viewId设置为适合图片选择的类型，比如DOCS_IMAGES，确保返回的文件是可被正确访问的资源：

<GoogleDrivePicker
  clientId="YOUR_CLIENT_ID"
  developerKey="YOUR_DEVELOPER_KEY"
  viewId="DOCS_IMAGES"
  onSelect={(data) => handleFileSelect(data)}
  // 其他配置...
/>

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