使用Google Drive API获取照片：新增图片仅显示名称问题求助

核心原因 #

1. 服务账号是独立的Google账号，新上传的图片未共享给该服务账号，导致无权限访问缩略图
2. 直接使用https://drive.google.com/thumbnail公共链接，前端访问时未携带服务账号授权信息，无法访问私有文件的缩略图

解决步骤 #

步骤1：确保服务账号有权访问新文件 #

• 从settings.json中找到client_email字段（服务账号邮箱）
• 打开Google Drive，找到新上传的图片，右键选择「共享」，将该服务账号邮箱添加为「查看者」

步骤2：修改后端代码，获取正确的授权缩略图链接 #

替换原有逻辑，直接通过Drive API获取官方thumbnailLink，并添加缓存处理：

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

const getDriveService = () => {
  const KEYFILEPATH = path.join(__dirname, 'settings.json');
  const SCOPES = ['https://www.googleapis.com/auth/drive'];

  const auth = new google.auth.GoogleAuth({
    keyFile: KEYFILEPATH,
    scopes: SCOPES,
  });
  const driveService = google.drive({ version: 'v3', auth });
  return driveService;
};

export async function getPhotosFromDrive() {
  const driveService = getDriveService();

  try {
    const response = await driveService.files.list({
      q: "mimeType='image/jpeg' or mimeType='image/png'",
      fields: 'files(id, name, thumbnailLink)',
    });

    const photos = response.data.files.map(photo => ({
      name: photo.name,
      id: photo.id,
      webViewLink: photo.thumbnailLink ? `${photo.thumbnailLink}&timestamp=${Date.now()}` : ''
    }));

    return photos;
  } catch (error) {
    console.error('Error retrieving photos:', error);
    throw error;
  }
}

步骤3：备选方案：生成带授权的临时访问链接 #

若官方thumbnailLink仍无法访问，可通过服务账号生成临时授权的图片访问链接：

export async function getPhotosFromDrive() {
  const driveService = getDriveService();

  try {
    const response = await driveService.files.list({
      q: "mimeType='image/jpeg' or mimeType='image/png'",
      fields: 'files(id, name)',
    });

    const photos = await Promise.all(response.data.files.map(async (photo) => {
      // 获取文件的下载链接
      const fileRes = await driveService.files.get({
        fileId: photo.id,
        fields: 'webContentLink'
      });
      // 获取服务账号的访问令牌
      const authClient = await driveService.auth.getClient();
      const token = await authClient.getAccessToken();
      // 拼接带授权令牌的访问URL
      const authorizedUrl = `${fileRes.data.webContentLink}&access_token=${token.token}`;
      
      return {
        name: photo.name,
        id: photo.id,
        webViewLink: `${authorizedUrl}&timestamp=${Date.now()}`
      };
    }));

    return photos;
  } catch (error) {
    console.error('Error retrieving photos:', error);
    throw error;
  }
}

验证修改 #

重新部署后端后，前端即可正常加载新上传的图片缩略图。

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