Cloudflare R2+Workers!马上搭建自己的云上图床!

结果图#

QmVgqgoC7G8NLS21WvR8j9gf5amu33XvuV68ZrgM5B9iFf.webp

原理#

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

创建 Cloudflare R2 存储桶#

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

  1. 进入Cloudflare 仪表盘,进入 R2 页面,如图

    QmU7u2JHUcevyHnwsCdAZfs7X7Fcdh3KJhn6eoy24Q5dGC.webp

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

为你的存储桶添加文件#

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

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

    QmNkMhDhpPLkYCpVhE1ov7Q6A34uWDvraCqNvuTqaCkujT.webp

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

  5. 打开浏览器,输入localhost:5244即可进入 AList 控制台,如图QmUBFKu7mCiRneCrsTNPxTH6S4gxwtXf9cwLzf4dKW9LLR.webp
  6. 用户名:admin密码:在cmd窗口中,如图。你可以使用鼠标左键在终端中框选内容然后单击鼠标右键进行复制操作QmVH3qZYo3QE6anNHymwkikq5MSeJphrZNR7RCH5jpP3wn.webp
  7. 注意,在 cmd 中,鼠标左键点击或拖动 cmd 的终端界面会导致进入选择状态,程序将会被系统阻塞,需要在终端界面点按鼠标右键解除。若进程被阻塞,cmd 的进程名会多一个选择,请注意。如图是程序被阻塞的例子,在终端界面点按鼠标右键即可解除QmapESiqSEvbYq3AJs15yYvhemRxSHrJaccjTFr99muX6Z.webp
  8. 现在,你已经成功以管理员身份登入了 AList单击最下面的管理QmfNE53GThdjVrh4q64MJcZqwcGPD7UtcYTNw9bVBaSEaF.webp
  9. 你会进入到如图界面。尽管 AList 运行在本地,也建议更改你的用户名和密码QmNdD8UU8fkVDBz5dXdJhCF2fZg8P1FwrcMaaTsG6a7ENy.webp
  10. 更改账密,重新以新账密登录Qmas7pMiPR2FNTXheBT1xGNUpzDiSzv7J7yd6oCuT17yad.webp
  11. 进入控制台,然后单击存储,如图QmS4gGyCM1j3RXgHEPuZ1zTbLAvGtVBEiPXJe9QMF3dD2D.webp
  12. 选择添加,如图QmRDVxt8WbrVkHavgFNXj3qC86ysw6sSZhPy3Uf2ixKp2E.webp
  13. 详细配置如图。挂载路径即 AList 展示路径,推荐使用/R2/你的存储桶名字,地区为autoCloudflare R2+Workers!马上搭建自己的云上图床!回到主页,如图QmSnR9Ptrssx4nqk9qCvhFUNKQyQqJiN7GRscwoj4Dczgj.webp
  14. 尝试上传文件,如图QmPqFsmZNNnh4jNyLS7X3h8Zr6ZCVqTqGVwTxmPDdbmrGW.webp
  15. 可以看到,速度非常快QmXfGK6aZjz741GrY8RfFfKMkUzDMB3xhx93PGZ9S1QycT.webp
  16. 为你的图床创建目录以分类横屏和竖屏图等,以便下文使用 Workers 连接 R2 来调用。后文我将使用R2的/ri/h 路径作为横屏随机图目录、/ri/v 路径作为竖屏随机图目录

QmNdD8UU8fkVDBz5dXdJhCF2fZg8P1FwrcMaaTsG6a7ENy.webp

创建 Workers,连接 R2#

  1. 进入Cloudflare 仪表盘,进入 Workers 和 Pages 页面,如图QmW5UaUap8T2R37u5dzmKGLmUgk4qKnSMFwHBVHqvVbkVA.webp
  2. 单击创建,选择创建 Workers,名称自取,单击部署QmVvLv5n41QQfDfYiVWYRpsfw7TVNGy1BYuv5e8vBRhKLA.webp
  3. 选择编辑代码QmTbRifzXQ593DGyjFQMbA9exyNp2iAeAg4zbVrfFimQc4.webp
  4. 粘贴代码(创建随机横屏图):

新代码:

export default {
async fetch(request, env, ctx) {
const bucket = env.MY_BUCKET;
const url = new URL(request.url);
const hostname = url.hostname;

// 初始化prefix
let prefix = '';

// 根据域名判断prefix
if (hostname === 'hrandom-pic.onani.cn' || hostname === 'api-hrandom-pic.onani.cn') {
prefix = 'ri/h/';
} else if (hostname === 'vrandom-pic.onani.cn' || hostname === 'api-vrandom-pic.onani.cn') {
prefix = 'ri/v/';
} else {
return new Response('Invalid domain', { status: 400 });
}

try {
// 如果是API域名,只返回数量
if (hostname.startsWith('api-')) {
const objects = await bucket.list({ prefix: prefix });
const count = objects.objects.length;
const headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/plain'
});
return new Response(count.toString(), { headers });
}

// 原有的随机图片逻辑
const objects = await bucket.list({ prefix: prefix });
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 });
}

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 });
}
},
};

旧代码:

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 });
}
},
};

  1. 点击左侧的文件图标QmQGQTiTXSESU2TSJ6tc3KrzWU4KABKqn6QZ1GdWqKnWmc.webp
  2. wrangler.toml中填入:
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "114514"
  1. 保存修改,点击右上角的部署QmP7hXdtenrJrzJRRePHQATGtyAsZEr5MkMsboXvmNUxTx.webp
  2. 在设置 – 变量找到 R2 存储桶绑定,添加你的存储桶,变量名即上文的MY_BUCKETQmStitSyATnA8sY9tTgZaXXqmqkGPUtZmMxn9KjbFQzgTc.webp
  3. 在设置 – 触发器添加你的自定义域名以便访问QmUMxtkCiKsgFw8afRUGREFztXE9D5W6FmCbAUB7DaVH5o.webp

    QmPF9iCoq6n8Jj2Z6kPkdJSCm45VJystZoYcir55yceCQo.webp

  4. 访问效果,每次刷新都不一样QmQgEdjXxF9oph2jYKzFMJToX9WfG11jUmPiNJnjhYVN4N.webp

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

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

原创文章,作者:mantou,如若转载,请注明出处:https://v2ez.com/1431.html

(0)
mantoumantou
上一篇 2025年5月4日
下一篇 2025年5月29日

相关推荐

  • 花海API更新v1.2

    地址:https://api.hhisite.cn v1.2更新内容 1.更换使用mdui,界面舒适度更高,更简洁。 2.修复随机二次元图片api偶尔图片链接失效问题。 3.修复获…

    代码程序 2021年8月11日
  • WordPress迁移更换域名 固定链接404 修改SSH端口

    前言 WordPress迁移可以分为以下几种情况: 仅更改域名 仅更改服务器 变更域名+服务器 下面就以这三种情况,可以实现的方式有很多,选取了一种适合自己的,把需要进行的操作记录…

    代码程序 2021年4月15日
  • HEXO博客网站主题:Solitude

    一款优雅的 Hexo 主题,支持懒加载、PWA、Latex以及多种评论系统。 增加评论弹幕页 更高效的自定义侧边栏功能模块,新版本支持排序 公开主题适配资源供大家使用 增加 Pos…

    2024年5月5日
  • 教你灵活解除网页操作限制

    前言 下午帮客户分析某文学登陆业务中,发现有页面禁用了网页右键,非常影响调试,平时遇到这种情况通常都是JS即可,但是网上查阅了资料后发现用控制台调节更灵活一些,毕竟禁用 JS 可能…

    代码程序 2021年4月30日
  • aws光帆超出流量自动关机一键脚本

    是否会因为光帆跑的流量统计而烦恼,是否担心流量跑超了,产生费用,那么他来了~ 废话不多说,直接贴我自己写的脚本 ==================================…

    代码程序 2024年9月5日
  • VPS修改完dns后resolv.conf总是被重置?

    介绍 出于不同的需要,我们有的时候需要对Linux的dns进行修改,那一般情况下我们都会对/etc/resolv.conf这个文件进行修改,可是过一段时间,或者机器重启后,机器还会…

    2025年5月4日
  • 为什么要用 Git

    〇 版本控制 比如,你晚上写一篇论文,写好了存起来。结果第二天早上起来,你再拿出来一看,害,写的什么啊。早上修改了一大堆,改完了存起来。结果下午一想,害,早上我改什么啊!昨晚那个写…

    代码程序 2024年9月29日
  • 哪吒面板搭建过程详解,教你搭建一款便携服务器监控探针

    今天给大家安利一个最近比较火的服务器状态监控面板,哪吒面板。作者并没有提供详细的安装流程,所以我呢就在这里记录下整个安装的过程,也可以给大家做个参考。 项目简介 被动接收,系统状态…

    2021年5月11日
  • WordPress侧栏访客IP签名欢迎图小工具制作教程

    我看网上有很多人都分享过类似的签名图,但是都没有相应的制作教程。今天奇它博客@老白就分享一下“WordPress侧栏访客IP签名欢迎图小工具制作教程” 1. 直接引用版 缺点,不可…

    2022年3月15日
  • Linux通过Systemd让程序开机启动并后台运行的一种方法记录

    最近在折腾这种GO语言开发的程序,单一文件,下载下来直接运行就能使用,真心简洁强大。但同时遇到一个问题,就是不能后台运行,不能开机启动。所以这里收藏了一下cloudreve官方的进…

    2024年8月16日

发表回复

登录后才能评论