使用react-google-drive-picker获取Google Drive图片文件夹时遭遇“仅可下载二进制内容文件”错误的技术求助

嘿，我来帮你搞定这个问题！你遇到的Only files with binary content can be downloaded. Use Export with Docs Editors files错误，核心原因是用错了Google Drive API的方法——你现在是想获取文件夹里的图片列表，但却调用了专门用来下载单个文件二进制内容的files.get方法（还加了alt: media参数），而文件夹本身并不是可下载的二进制文件，所以直接触发了这个错误。

错误原因拆解 #

• gapi.client.drive.files.get({alt: 'media'})这个调用的作用是下载单个文件的二进制内容（比如一张图片的原始数据），它只能用于文件，不能用于文件夹。
• 你选中的是文件夹ID，用这个方法去请求文件夹，自然会被API拒绝，因为文件夹没有可下载的二进制内容。

解决方案：改用files.list获取文件夹内的图片列表 #

要获取指定文件夹下的所有图片，你需要调用gapi.client.drive.files.list方法，通过参数过滤出目标文件夹下的图片类型文件。

修改你的useEffect代码如下：

useEffect(() => {
  if(data && data.docs?.[0]?.id){
    const targetFolderId = data.docs[0].id;
    // 调用files.list获取文件夹下的所有图片
    const request = gapi.client.drive.files.list({
      // 过滤条件：属于目标文件夹，且是图片类型
      q: `'${targetFolderId}' in parents and mimeType contains 'image/'`,
      // 指定返回的字段，减少冗余数据
      fields: 'files(id,name,webContentLink,thumbnailLink)',
      // 分页大小，可根据需求调整
      pageSize: 100
    });

    request.execute((res: any) => {
      console.log('获取到的图片列表:', res.files);
      // 现在返回的是图片数组，记得调整你的state类型
      setImageList(res.files);
    }).catch((err: any) => {
      console.error('获取图片列表失败:', err);
    });
  }
}, [data])

关键参数说明 #

• q参数：这是Drive API的查询过滤语法，'${targetFolderId}' in parents确保只返回目标文件夹下的文件，mimeType contains 'image/'则过滤出所有图片格式的文件（比如JPG、PNG等）。
• fields参数：指定你需要的返回字段，比如id（文件ID）、name（文件名）、webContentLink（文件下载链接）、thumbnailLink（缩略图链接），避免返回不必要的数据，提升请求效率。
• pageSize参数：控制每页返回的文件数量，默认是100，如果你的文件夹里图片超过100张，需要处理分页逻辑（通过nextPageToken）。

额外提示：如果需要下载单个图片的二进制内容 #

如果你之后需要获取某张图片的原始二进制数据，可以对单个图片的ID调用files.get加alt: media参数，比如：

const downloadSingleImage = (imageFileId) => {
  const request = gapi.client.drive.files.get({
    fileId: imageFileId,
    alt: 'media'
  });

  request.execute((res: any) => {
    // 处理二进制内容，比如转换为Blob或Data URL
    const blob = new Blob([res], { type: 'image/jpeg' });
    const imageUrl = URL.createObjectURL(blob);
    // 后续逻辑，比如显示图片或下载
  }).catch((err) => {
    console.error('下载图片失败:', err);
  });
}

内容的提问来源于stack exchange，提问作者Sergiu Tonț