结果图

原理

图源由Cloudflare R2托管，通过两个Workers连接R2以展示随机图片，静态页面引用Workers的URL以实现以上界面

创建Cloudflare R2存储桶

R2实际上是一个对象存储。Cloudflare提供10G的免费存储和每月1000万次的免费访问

1. 进入Cloudflare 仪表盘，进入R2页面，如图
   
2. 选择创建存储桶
   
3. 为你的存储桶起一个名字，然后单击创建
   
4. 进入如下页面就已经创建完毕了
   
5. 返回R2首页。因为在下文我们需要使用API来进行文件传输，所以需要创建你的R2 API令牌，单击管理R2 API令牌
   
6. 单击创建API令牌，如图
   
7. 因为我们需要该API来管理单个R2存储桶，所以选择对象读和写，详细配置如图
   
8. 创建API令牌后，新页面会展示令牌的详细信息，**仅会展示一次！！！**保持这个页面，直到你将该页面的所有信息都已经妥善保存，不要关闭界面，否则，你需要轮转API令牌以禁用之前的旧密钥，如图
   
9. 确保你已经妥善保存你的R2 API令牌，然后进行下一步

为你的存储桶添加文件

因为Web界面传输文件较慢且不支持传输大于300MB的文件。这里使用本地部署AList然后连接你的R2存储桶实现高速上传

1. 笔者使用Windows。前往AList - Github Release下载适用于Windows的最新可执行文件，如图
   
2. 将下载的压缩包解压，并将其中的alist.exe放入一个空文件夹
3. 单击搜索框，输入cmd并回车，如图
   

4. 在cmd中输入alist.exe server并且不要关闭窗口，运行成功后如图

5. 打开浏览器，输入localhost:5244即可进入AList控制台，如图

6. 用户名：admin密码：在cmd窗口中，如图。你可以使用鼠标左键在终端中框选内容然后单击鼠标右键进行复制操作

7. 注意，在cmd中，鼠标左键点击或拖动cmd的终端界面会导致进入选择状态，程序将会被系统阻塞，需要在终端界面点按鼠标右键解除。若进程被阻塞，cmd的进程名会多一个选择，请注意。如图是程序被阻塞的例子，在终端界面点按鼠标右键即可解除

8. 现在，你已经成功以管理员身份登入了AList，

9. 单击最下面的管理

10. 你会进入到如图界面。尽管AList运行在本地，也建议更改你的用户名和密码

11. 更改账密，重新以新账密登录

12. 进入控制台，然后单击存储，如图

13. 选择添加，如图

14. 详细配置如图。挂载路径即AList展示路径，推荐使用/R2/你的存储桶名字，地区为auto，根文件夹路径为/（图上填反了Orz）

15. 回到主页，如图

16. 尝试上传文件，如图

17. 可以看到，速度非常快

18. 为你的图床创建目录以分类横屏和竖屏图等，以便下文使用Workers连接R2来调用。后文我将使用/ri/h作为横屏随机图目录、/ri/v作为竖屏随机图目录

创建Workers，连接R2

1. 进入Cloudflare 仪表盘，进入Workers 和 Pages 页面，如图
   
2. 单击创建，选择创建Workers，名称自取，单击部署
   
3. 选择编辑代码
   
4. 粘贴代码（创建随机横屏图）：

export default {
  async fetch(request, env, ctx) {
    // R2 bucket 配置
    const bucket = env.MY_BUCKET;

    try {
      // 列出 /ri/h 目录下的所有对象
      const objects = await bucket.list({ prefix: 'ri/h/' });

      // 从列表中随机选择一个对象
      const items = objects.objects;
      if (items.length === 0) {
        return new Response('No images found', { status: 404 });
      }
      const randomItem = items[Math.floor(Math.random() * items.length)];

      // 获取选中对象
      const object = await bucket.get(randomItem.key);

      if (!object) {
        return new Response('Image not found', { status: 404 });
      }

      // 设置适当的 Content-Type
      const headers = new Headers();
      headers.set('Content-Type', object.httpMetadata.contentType || 'image/jpeg');

      // 返回图片内容
      return new Response(object.body, { headers });
    } catch (error) {
      console.error('Error:', error);
      return new Response('Internal Server Error', { status: 500 });
    }
  },
};

5. 点击左侧的文件图标
   
6. 在wrangler.toml中填入：

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "114514"

7. 保存修改，点击右上角的部署
   

8. 在设置-变量找到R2存储桶绑定，添加你的存储桶，变量名即上文的MY_BUCKET
   

9. 在设置-触发器添加你的自定义域名以便访问
   

10. 访问效果，每次刷新都不一样
    

通过使用HTML的<img>标签引用即可达到开头的效果

如：<img src="你的域名" alt="">