引言

大家好，我是板鸭，最近刚建好一个博客，并且配置了 R2 图床，发现博客的主题的评论区可以设置默认 Gravatar 头像，但是 Gravatar 的默认头像未免有些无趣，因此我想到利用 Cloudflare Worker 构建一个能够访问 R2 图床的 API ，并且支持随机图的API来设置随机头像。

设计思路

  1. 通过 Cloudflare Worker，使用 host + file_path 的方式访问R2图床的图片。
  2. 通过 Cloudflare Worker，使用 host + dir_path 的方式实现该文件夹下文件的随机访问。

费用需求

本项目的实现非常简单且实用，只需要以下几个免费的资源即可：

  1. Cloudflare Worker 免费版，每天10万次免费请求。
  2. Cloudflare R2 免费版，每月10GB免费流量。
  3. 一个托管在 Cloudflare 的域名，可以去白嫖一个免费的域名，或者使用自己的域名。

实现步骤

注册申请 Cloudflare R2

这个部分网上的教程很多，操作也很简单，这里就略过了。

部署 Cloudflare Worker

  1. 登录 Cloudflare，选择 Workers 和 Pages，创建一个 Worker。
    Cloudflare
  2. 创建好之后直接部署 -> 继续处理项目 -> 转到设置
  3. 设置 -> 绑定 -> R2 存储桶
    Cloudflare
  4. 变量名称设置为MY_BUCKET，并且选择你部署好的 R2 存储桶，点击部署。
    Cloudflare
  5. 在域和路由处点击添加 -> 自定义域，输入你想要的域名，例如r2.example.com，此处你的域名在 Cloudflare 上托管，它会自动帮你添加好 DNS 解析，最后点击添加域，至此我们的基础工作就完成了，接下来进入到代码部分

编写 Cloudflare 代码并部署

实现 R2 图床访问的代码

首先，我们可以实现一个简单的代码来访问 R2 图床的图片，代码如下：

此处内容需要评论回复后（审核通过）方可阅读。

这段代码也很好理解，核心是通过env.MY_BUCKET.get(key)来获取 R2 存储桶中的文件，然后返回给用户。

其主要功能是：

  1. 处理 CORS 请求：允许跨域请求，并处理预检请求（OPTIONS），如果不实现跨域请求，浏览器会阻止跨域请求，导致前端应用无法从不同域名访问你的资源
  2. 从 R2 存储桶中获取文件：根据请求的 URL 路径从 R2 存储桶中获取文件。
  3. 返回文件内容：将文件内容作为 HTTP 响应返回给客户端，同时设置适当的HTTP头信息（包括 CORS 头）。

实现效果：

当我们访问https://{host}/{file_path}时，就可以访问到 R2 存储桶中的文件（需要提前上传图片）。

实现 R2 图床访问+随机图 API 的代码

然后，我们优化代码，

此处内容需要评论回复后（审核通过）方可阅读。

这个代码在之前的基础上增加了两个功能，如果访问的路径不是一个图像文件：

  1. 列出指定目录下的所有对象：通过MY_BUCKET.list方法列出指定目录下的所有对象，然后过滤出所有图片文件。
  2. 随机选择一个图片：从所有图片文件中随机选择一个图片，然后返回给客户端。

至次，我们的 API 就完成了，当我们访问https://{host}/{file_path}时，就可以访问到 R2 存储桶中的文件（需要提前上传图片），当我们访问https://{host}/{dir_path}时，就可以访问到 R2 存储桶中的随机图片。

测试

可以直接使用浏览器访问我们的网址，每次访问应该会返回不同的图片。

那么看到这里，小伙伴可以刷新一下页面，看看左上角我的头像是不是会变化呢？

如果这篇文章有帮到你的话，请留下评论点个赞吧！评论使用QQ邮箱的话会自动解析成你的QQ头像哦~

最后修改：2025 年 02 月 08 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏(☆ω☆)