Cloudflare R2图片管理面板部署简记

2025-12-18 ‧ 2859 words ‧ ＃guidebook

我并不参与代码撰写，全都是Gemini写的。

📑 Table of Contents

✦ 目录 ✦

事情是这样，我正在写香港游记，但因为想上传图片，而Hugo的图片管理一直很麻烦，这事一直拖延。

我用的图床是Cloudflare R2存储桶，是根据之前小爱的教程一步步设置的，好用，免费，管饱。就是上传一直非常麻烦，因为我不用PicGO传图，通常是整理好图片通过CF的后台一次性上传再一张张复制链接放到博客文档里，但这个后台非常笨重，也无法直接预览图片，手机传图也超麻烦，总之就是不好用，不好用。所以我得想个办法。

在询问一番Gemini之后，发现不需要很复杂的设置，直接用Cloudflare Worker绑定R2，就可以在前端页面上实现在类似文件上传和删除之类的操作。调试了一段时间页面后，稍微实现了我需要的功能，我并不参与代码撰写，全都是Gemini写的。

面板功能及问题简述

在网页端上传、删除图片文件（移动端同样用法）
Cloudflare R2图片及文件夹基本预览
不同格式公共URL复制

都不是复杂的功能，在R2后台都可以操作，只是部署后可能操作更加方便。

同时存在以下问题：

图片管理面板使用的默认分配的域名workers.dev已经被防火墙封禁，如果需要国内环境访问，需要准备个人域名。

其他方案介绍

在观看本记录之前，需要提及，R2是有很多在线管理面板可以用的，例如R2Client（桌面客户端），但我的需求是希望手机也可以使用，手机端也有人开发APP，不过好贵要五美元jpg，我连图床本体都不舍得花钱了……

后来查找到S3-Image-Port（兼容很多不同图床），这个有网页端公共实例在线使用，也有静态部署，功能齐全，配置都保存在浏览器本地储存，我猜如果手机端使用的话，应该导入一遍配置就可以，项目似乎十分成熟。

我最开始是希望做一个自己的萌图Gallery，希望灵活性高一点，甚至想嵌入博客里，同时也想在自定义域名里上传。相较于S3 Port，本方案大概方便在于是用Cloudflare Worker直接绑定了R2，不需要额外的Key设置，设置好之后打开输个个人密码就能用。但各类功能不如S3 Port完善。

如果上述内容已了解完毕，那么就来看看具体操作步骤吧😉

前期准备

请先确保您也是使用Cloudflare R2储存桶作为图床。如果不是，同时也想以R2作为图床，请回退文章开头查看爱海的教程。
请确定您已经创建好了R2储存桶（Bucket），并已经为储存桶开启了开启了Public Access（公开访问域），并获得了一个类似 https://pub-xxx.r2.dev 的链接。

如果没有，请见下图：

【存储和数据库】 → 【R2对象存储】 → 【你创建的储存桶Bucket（如我的叫做picture）】 → 【设置】 → 【公共开发 URL】→【启用】。请确保此项为开启状态。并且记录下你的公共开发Url，后续将会使用到。

如果你有个人域名的话，也可以给R2储存桶设置一个子域名，Cloudflare提示r2.dev域名有一定速率限制，尽管我测试使用下来问题不是很大。担心这方面的话可以先行设置。

设置Cloudflare Worker

进入Cloudflare后台，点击左侧菜单栏的 Workers & Pages。
点击创建应用程序。

在跳出的页面中，选择从Hello World!开始。
在Worker name内填一个相对简单的名字，例如r2，后续如果不自定义域名，则这个r2.USERNAME.workers.dev会是你访问面板的域名。
点击部署。
部署完成后，进入Worker页面，点击编辑代码。

在代码编辑页面，请将worker.js内已有的代码全部删除。并将以下代码全部复制进去。

【代码片段获取：Gist】

【代码片段获取：Codepen（在Javascript部分）】

两个链接代码是一致的，只是防止访问困难上传了不同地方。
🚩重要：

请在编辑器内Ctrl + F搜索查找请在此处填入公共URL字段，共有2处，应分别在第6行、第201行附近。均需替换为前期准备中的公共开发URL。URL应以https://xxx.r2.dev/格式，请注意URL需包含末尾斜杠。

替换完毕后点击部署。

第7步与第8步配图

当页面底端跳出【当前版本已保存】，说明这一步骤已完成

绑定R2储存桶及设置访问密码

回到Worker页面，进入概述，点击【绑定】。

在弹出的页面框左侧栏中找到【R2存储桶】，点击【添加绑定】。
在弹出的右边栏中，变量名称必须填写BUCKET，下拉框选择你的存储桶，点击部署。

设置访问密码：点击Worker页面内的【设置】，来到【变量和机密】部分，点击【添加】。

在弹出的右边栏中，类型选择【密钥】，变量名为AUTH_PASS，值请自行填写，注意此值为你的访问密码，后续所有上传操作都需要填写过访问密码这个值以后，才能进行操作。

未来如需修改访问密码等操作，也在此处进行。
添加完毕后，点击worker页面上的【访问】（访问链接为xxx.USERNAME.workers.dev）。

如果部署成功，则在输入访问密钥后，应当可以加载出R2文件画廊列表，选择文件上传功能也为正常。🎉预祝大功告成！

个人域名绑定（Optional）

由于Cloudflare分配的workers.dev域名可能被墙，因此我也绑定了个人域名，在【设置】→【域和路由】→【自定义域】中设置就可以，如果域名在Cloudflare下管理的话，一步步点击操作就可以了。

如果通过自定义域名上传图片失效、过慢的话，有可能是触发了上传限制，请进入R2存储桶，点击【设置】→【CORS策略】→【编辑】→输入以下内容：

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

这一步我个人没有遇到，不过以防万一还是贴上。

其他说明

部署完毕后也可以在手机端访问域名，测试一下上传情况，在此处稍作说明，iOS端上传图片的话，HEIC的图片会被自动兼容为JPEG图。

我这边遇到的上传速度似乎主要取决于网速和文件大小，如果遇到上传慢的问题可以尝试不同VPN或WiFi数据网络等方式解决，或者在Worker和R2设置均完毕后等几分钟后再开始上传。

如果实在不行，也可以给R2储存桶设置一下个人域名，绕开这部分的速率限制（请见前期准备的第2条说明）。请注意代码编辑内的两处链接也因此需要更改为个人域名。

关于文件大小问题，代码内设置的上限为100MB（单个文件），这是Worker的请求上限。如果超过这个大小（一般不会吧！）则只能在R2本身后台里上传了，这个上限在5GB（单个文件）。

关于这部分，请查看Cloudflare文档：R2 Limits和Worker Limits。

这个面板理论上应该可以实现更多类似拖拽移动图片更换放置位置的功能，但我没有再往下研究了。如果感兴趣，可以将编辑器内的代码保存到本地，然后发给Gemini之类的工具去一步步询问修改、添加代码的位置，因为代码过长，直接复制进去问或在Canvas实时编辑可能都不适用。

我在另一个Worker和Bucket下对教程从头测试了一番，一步步操作下来应当是没有问题的。如果该指南/简明记录有任何问题，欢迎指正。但代码、前端页面有所纰漏或有奇怪的地方，更建议向人工智能寻找帮助😉

那么，就这样！下篇游记见！