最近折腾了一下图床，发现传统的白嫖方案（比如配合 Telegram）已经不太行了，动不动就被限制。网上搜了一圈，目前最稳、最香的方案绝对是 Cloudflare
Pages + R2 对象存储！

每月 10GB
免费存储空间，免流出流量费，还带一个非常漂亮的网页管理后台！但是，网上的教程很多都过时了，或者细节没讲清楚。我作为一个纯小白，在这上面整整卡了好几天，踩了无数个巨坑。今天结合我自己的实战教训，把这套方案的完美搭建步骤全盘托出，保证你照着做一遍过！

📝 核心原理

我们将使用的是 GitHub 上开源的图床面板项目（非常推崇 MarSeventh/CloudFlare-ImgBed 及其分支）。

  - 前端网页：托管在 Cloudflare Pages（免费）。
  - 图片存储：存放在 Cloudflare R2（每月 10G 免费）。
  - 数据记录：存放在 Cloudflare KV（免费）。

🛠️ 准备工作 & 第一个大坑

1.  注册账号：你需要一个 GitHub 账号和一个 Cloudflare 账号。
2.  开通 R2 存储：登录 Cloudflare，在左侧菜单找到 “存储和数据库” -> “R2”。开通 R2 是需要绑定支付方式的。
https://dash.cloudflare.com/1f93986588fd617e4cfc91ecccd21850/r2/overview

🚨 踩坑预警 1：绑卡失败 我一开始想随便搞张免费的虚拟信用卡（VCC）绑上去，结果直接被 Stripe
网关无情拒绝。如果你也有这个问题，强烈建议把你的卡先绑到
PayPal，然后用 PayPal 去授权 Cloudflare！ 成功率极高，而且只要你不超 10G 额度，绝对不会乱扣一分钱。



🚀 开始搭建：详细步骤

第一步：拷贝（Fork）开源代码

打开 GitHub仓库， CloudFlare-ImgBed （推荐原版作者 MarSeventh 的仓库，或者其他你喜欢的优化分支）。
https://github.com/MarSeventh/CloudFlare-ImgBed

点击右上角的Fork，把代码复制到你自己的 GitHub 账号下。

第二步：在 Cloudflare 创建存储环境（⚠️ 重点提速防墙！）

回到 Cloudflare 中文面板：

1.  创建 R2 存储桶：在 R2 页面，点击“创建存储桶”，随便起个名字（比如
    my-files）。注意：位置/地区千万不要用默认的自动！强烈建议手动选择“亚太地区
    (APAC)”！ 这样国内访问速度会快非常多。
2.  获取 R2 公网链接（必须绑自定义域名！）： 进入你刚建好的存储桶，点击顶部的 “设置”。官方在下方“公开访问”里提供了一个 .r2.dev
    的默认链接，但这玩意儿在国内大概率是被墙的！ 正确做法：在设置里找到 “自定义域 (Custom
    Domains)”，连接一个你自己托管在 CF 上的域名（比如
    file.yourdomain.com）。绑定成功后，把这个自定义域名复制保存下来备用。
3.  创建 KV 数据库：左侧菜单进入 “存储和数据库” -> “KV”，点击“创建命名空间”，随便起个名字（比如 imgbed_kv）。

第三步：部署网页端（迎来最大天坑！）

1.  在 Cloudflare 左侧菜单点击 “Workers 和 Pages” -> 点击 “创建应用程序” -> 选择 “Pages” 选项卡 -> 点击
    “连接到 Git”。
2.  选中你刚才 Fork 到自己账号下的图床仓库，点击“开始设置”。

🚨 踩坑预警 2：构建命令报错（疯狂 500 错误 / Missing script） 在“设置构建和部署”这一步，千万不要凭感觉乱填！
请务必展开“构建配置”，严格这样填：

  - 框架预设：选择 无 (None)
  - 构建命令：填入 npm install （重点！别自作聪明填 npm run build，只填 install 让它下载缺失的组件包即可！）
  - 构建输出目录：填入 frontend-dist（如果后面报错找不到文件夹，再改回 /）
  - 建议在下方“环境变量”加一条 NODE_VERSION，值填 18 或 20，防止 Node 环境太老。

填好后，点击“保存并部署”。

💡 防墙小贴士： 部署完成后，官方会给你一个类似 xxx.pages.dev 的默认网址。同样因为容易被墙，强烈建议在 Pages
项目的“自定义域”选项卡里，绑定一个你自己的域名（比如
img.yourdomain.com），以后就用自己的域名访问图床，稳如老狗。

第四步：设置账号密码与绑定（程序认死理，切勿随意发挥！）

🚨 踩坑预警 3：名称填错导致无法登录
部署成功后先别急着访问！你需要给图床设置后台账号密码，还要告诉网页它应该连接哪个存储桶。因为代码里写死了固定的“变量名”，你必须一字不差！

在你的 Pages 项目页面，点击顶部的 “设置”：

1.  左侧点击 “变量和机密”，添加两个纯文本变量：
      - 名称：BASIC_USER （值填你想要的账号，比如 admin）
      - 名称：BASIC_PASS （值填你想要的密码，比如 123456）
2.  左侧点击 “绑定”：
      - 找到 KV 命名空间，点击添加/编辑，变量名称必须填：img_url （右侧选你刚才建的 KV）。
      - 找到 R2 存储桶，点击添加/编辑，变量名称必须填：img_r2 （右侧选你建的 R2）。

🚨 踩坑预警 4：改完不生效？ 改完这些变量网页不会自动更新！必须回到顶部的 “部署” 选项卡，找到最近一条成功的记录，点击右侧的三个点 ... ->
“重试部署 (Retry deployment)”。等它重新走完进度条，密码和绑定才真正生效！

第五步：后台终极设置（解决前台上传报错、图片全灰不显示）

这时候你打开你的图床前台已经能看到上传界面了。但是直接拖图片进去，会一直提示“上传失败”！



🚨 踩坑预警 5：忘了配置上传渠道和公网链接 图片其实已经存进 R2 了，但因为程序不知道你 R2 的公网地址，所以直接报错，后台图片也变成灰色的失败图标。

终极解决办法：

1.  点击网页右下角的菜单，或者在网址后面加上 /dashboard 访问管理后台。
2.  输入刚才设置的账号和密码登录。
3.  点击左侧 “系统管理” -> “系统设置” -> “上传设置”。
4.  把默认上传渠道改为 Cloudflare R2。
5.  在 R2_env 的大框里点击“编辑”，把我们在“第二步”绑定的那个自定义域名（比如
    https://file.yourdomain.com）粘贴进去！（⚠️ 注意：链接末尾千万不要带斜杠 /）。
6.  点击保存！

🎉 大功告成！

去“文件管理”刷新一下，刚才灰色的图片瞬间全亮了！回到前台首页拖拽一张图片，秒传！而且直接弹出带有你自定义域名加持的专属链接！

不仅是图片，如果你上传的是 mp4 短视频，你也可以直接获得这个视频的纯净直链地址，非常方便在博客或其他代码中直接引用（注意受限于 CF
的免费单次请求限制，上传的文件体积建议控制在几十 MB 以内）。

上次分享的音乐视频很多兄弟都说打不开，这次用这个全新的图床再分享一次。



历经九九八十一难，终于搞定了这个完美的私人图床。希望我踩过的这些坑，能帮大家少走弯路。有问题欢迎留言交流！