如何在React前端网站中展示Google Drive图片并关联对应日期？

前期准备（无额外后端依赖，新手可快速落地） #

• 完成Google Drive API的基础开通：创建对应应用的API凭证，将React项目的开发、生产域名加入授权白名单，把生成的客户端ID存入React项目的环境变量文件，别硬编码在代码里避免泄露。
• 在个人Google Drive里新建一个独立的专属文件夹，专门存网站要展示的照片，记下这个文件夹的唯一ID，后续所有读写操作都只在这个文件夹范围内，避免权限越界触发安全拦截。

核心功能实现步骤 #

照片上传逻辑 #

• 引入Google Drive API的Web端轻量SDK，在React页面内嵌授权触发组件，用户完成一次Google账号授权后，SDK会自动处理后续的临时凭证续期，不用自己手写复杂的鉴权逻辑。
• 调用上传接口时，除了传照片文件本体，要在文件的自定义应用元数据（appProperties）字段里写两个核心参数：
  • 这张照片对应的关联日期值，这个字段是你的应用专属存储的，不会被Google系统自动改动
  • 把文件的共享权限设置为允许公开读取缩略图/原图，避免前端渲染时权限报错
• 关键注意：上传时把parents参数设为之前建好的专属文件夹ID，确保所有照片都存在统一目录下，后面查列表的时候不用跨目录找文件。

照片列表+日期同步展示逻辑 #

• 在React页面加载时，调用Google Drive的文件列表查询接口，限定查询范围就是之前的专属文件夹，筛选条件设为文件类型是图片（mimeType字段以image/为前缀）。
• 拿到接口返回的文件列表后，把数据存在React组件的本地state里，用内置的useEffect Hook触发页面渲染就行，不需要学额外的复杂状态管理工具：
  • 从每个文件的返回结果里提取可访问的图片预览地址，直接绑到<img>标签的src属性上就能渲染照片
  • 从每个文件的appProperties字段里提取之前上传时存的关联日期，渲染在对应照片的下方，实现照片和日期一一对应展示

新手容易踩的坑 #

• 别拿Google Drive系统自带的文件创建时间、修改时间当关联日期：这类系统字段会在你调文件权限、同步文件内容的时候被自动更新，很容易和你要展示的实际关联日期对不上。
• 别直接用第三方流传的Google Drive图片永久链接当img的src：这类链接有严格的防盗链，前端请求的时候大概率会出跨域或者403报错，一定要用接口返回的带临时访问权限的图片地址。
• 别乱申请过高的API权限：只要申请读写专属文件夹的权限就够，权限太高会触发Google的安全审核，拉长调试时间。

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