图床部署教程（Cloudflare R2 + Worker + Pages）

GitHub项目地址：ImageHost-R2

这是一个基于 Cloudflare R2 和 Worker 搭建的免服务器图床，前端极简，支持上传图片、多图拖拽、自动生成链接、图片列表查看等功能。

🎬 视频教程

🚧 一、Cloudflare 后端配置

1. 开通 Cloudflare R2

  1. 登录 Cloudflare 控制台：https://dash.cloudflare.com
  2. 进入左侧「R2 对象存储」
  3. 点击「订阅」（需添加付款方式，免费额度够个人使用）
  4. 创建存储桶：
    • 自定义名称（如：img）
    • 地区选择靠近用户的区域（推荐默认）
    • 创建完成

2. 创建 Worker

  1. 进入「Workers & Pages」页面
  2. 选择「创建应用」→「默认 Worker」→ 输入名称
  3. 点击「部署应用」生成初始 Worker
  4. 在编辑页面粘贴项目中的 worker.js 代码，替换默认内容
  5. 点击「保存并部署」

3. 绑定 R2 存储桶到 Worker

  1. Worker 页面 → 「设置」→「绑定」→ 添加绑定资源
  2. 类型选择「R2 存储桶」
  3. 名称设置为：R2_BUCKET
  4. 存储桶选择刚刚创建的 R2 存储
  5. 点击部署，完成绑定

4. 添加可选变量（如清单路径）

  1. Worker 设置 → 「变量和机密」
  2. 添加变量：
    • 变量名：LIST_PATH
    • 变量值：如 /list（默认也是 /list）

5. 添加自定义域名（可选）

  1. Worker 设置 → 「域和路由」
  2. 点击「添加自定义域名」
  3. 绑定你已有的域名（如 img.nbvil.com）
  4. 若未配置，将使用默认的 xxx.workers.dev 子域名
  5. 前端需填写该地址为上传接口地址

💻 二、部署前端页面

📦 项目地址

方法一：Fork 自动部署（推荐）

  1. Fork 本项目到自己的 GitHub 仓库
  2. 修改 public/config.js：
1
2
3
4
window.IMG_BED_CONFIG = {
  apiBaseUrl: "https://你的-worker域名.workers.dev", // 或自定义域名
  maxFiles: 5
}
  1. 打开 Cloudflare 控制台 → 「Workers & Pages」→ 创建 Pages 应用
  2. 绑定刚才 Fork 的仓库 → 保持默认配置 → 启动部署

可选：设置自定义域名，绑定前端访问入口（如 imgview.nbvil.com）

方法二：手动上传部署

  1. 下载项目压缩包或 Clone 本仓库
  2. 修改 public/config.js 文件
  3. 在 GitHub 创建私有仓库上传项目文件
  4. 使用 Cloudflare Pages 绑定该仓库进行部署

📂 访问说明

  • 图床首页：https://page 域名/

  • 图片访问地址：上传成功后返回链接，如：

    1
    https:// Worker 域名/图片名

  • 图片列表页面（LIST_PATH 默认 /list）：

    1
    https:// Worker 域名/list