引言
大家好，我是板鸭，最近刚建好一个博客，并且配置了 R2 图床，发现博客的主题的评论区可以设置默认 Gravatar 头像，但是 Gravatar 的默认头像未免有些无趣，因此我想到利用 Cloudflare Worker 构建一个能够访问 R2 图床的 API ，并且支持随机图的API来设置随机头像。
设计思路
- 通过 Cloudflare Worker，使用
host + file_path的方式访问R2图床的图片。 - 通过 Cloudflare Worker，使用
host + dir_path的方式实现该文件夹下文件的随机访问。
费用需求
本项目的实现非常简单且实用，只需要以下几个免费的资源即可：
- Cloudflare Worker 免费版，每天10万次免费请求。
- Cloudflare R2 免费版，每月10GB免费流量。
- 一个托管在 Cloudflare 的域名，可以去白嫖一个免费的域名，或者使用自己的域名。
实现步骤
注册申请 Cloudflare R2
这个部分网上的教程很多，操作也很简单，这里就略过了。
部署 Cloudflare Worker
- 登录 Cloudflare，选择 Workers 和 Pages，创建一个 Worker。
- 创建好之后直接部署 -> 继续处理项目 -> 转到设置
- 设置 -> 绑定 -> R2 存储桶
- 变量名称设置为
MY_BUCKET，并且选择你部署好的 R2 存储桶，点击部署。 - 在域和路由处点击添加 -> 自定义域，输入你想要的域名，例如
r2.example.com，此处你的域名在 Cloudflare 上托管，它会自动帮你添加好 DNS 解析，最后点击添加域，至此我们的基础工作就完成了，接下来进入到代码部分
编写 Cloudflare 代码并部署
实现 R2 图床访问的代码
首先，我们可以实现一个简单的代码来访问 R2 图床的图片，代码如下：
此处内容需要评论回复后（审核通过）方可阅读。
这段代码也很好理解，核心是通过env.MY_BUCKET.get(key)来获取 R2 存储桶中的文件，然后返回给用户。
其主要功能是：
- 处理 CORS 请求：允许跨域请求，并处理预检请求（
OPTIONS），如果不实现跨域请求，浏览器会阻止跨域请求，导致前端应用无法从不同域名访问你的资源 - 从 R2 存储桶中获取文件：根据请求的 URL 路径从 R2 存储桶中获取文件。
- 返回文件内容：将文件内容作为 HTTP 响应返回给客户端，同时设置适当的HTTP头信息（包括 CORS 头）。
实现效果：
当我们访问https://{host}/{file_path}时，就可以访问到 R2 存储桶中的文件（需要提前上传图片）。
实现 R2 图床访问+随机图 API 的代码
然后，我们优化代码，
此处内容需要评论回复后（审核通过）方可阅读。
这个代码在之前的基础上增加了两个功能，如果访问的路径不是一个图像文件：
- 列出指定目录下的所有对象：通过
MY_BUCKET.list方法列出指定目录下的所有对象，然后过滤出所有图片文件。 - 随机选择一个图片：从所有图片文件中随机选择一个图片，然后返回给客户端。
至次，我们的 API 就完成了，当我们访问https://{host}/{file_path}时，就可以访问到 R2 存储桶中的文件（需要提前上传图片），当我们访问https://{host}/{dir_path}时，就可以访问到 R2 存储桶中的随机图片。
测试
可以直接使用浏览器访问我们的网址，每次访问应该会返回不同的图片。
那么看到这里，小伙伴可以刷新一下页面，看看左上角我的头像是不是会变化呢？
如果这篇文章有帮到你的话，请留下评论点个赞吧！评论使用QQ邮箱的话会自动解析成你的QQ头像哦~
3 条评论
希望大家多多支持！ヾ(≧∇≦*)ゝ