测试
项目地址：https://github.com/MarSeventh/CloudFlare-ImgBed
演示站点（密码：cfbed）：https://cfbed.1314883.xyz/
🗑设置Cloudflare R2
3.1 创建 R2 存储桶
- 登录 Cloudflare Dashboard
- 选择 “R2 存储对象”
- 点击 “创建存储桶”
- 输入存储桶名称（全局唯一）
- 选择存储区域
- 点击 “创建存储桶”
📂第一步：Fork 项目
- 访问 CloudFlare ImgBed 项目
- 点击右上角的 “Fork” 按钮
- 选择您的 GitHub 账户
- 确认 Fork 完成
🏗️ 第二步：创建 Pages 项目
2.1 访问 Cloudflare Dashboard
- 登录 Cloudflare Dashboard
- 选择左侧菜单的 “计算和AI” -> “Workers & Pages”
- 点击 “创建应用程序”
- 在最下方
Looking to deploy Pages?选择 “Get started” - 在 “导入现有 Git 存储库” 处点击 “开始使用”
2.2 连接 GitHub 仓库
- 如果首次使用，需要授权 Cloudflare 访问 GitHub
- 选择您 Fork 的
CloudFlare-ImgBed仓库 - 点击 “开始设置”
2.3 配置项目设置
| 配置项 | 值 | 说明 |
|---|---|---|
| 项目名称 | cloudflare-imgbed（或自定义） | 项目标识符 |
| 生产分支 | main | 生产环境分支 |
| 构建命令 | npm install | 重要：v2.0 新构建命令 |
| 构建输出目录 | /frontend-dist | 前端构建产物目录 |
重要提醒 v2.0 版本的构建命令已变更为
npm install，请确保使用正确的构建命令。
2.4 部署项目
- 点击 “保存并部署”
- 等待首次部署完成（约 2-3 分钟）
🗄️ 第三步：配置数据库
数据库用于存储文件元数据，是必需的组件，可选数据库为 KV 数据库和 D1 数据库。两者对比如下表所示，根据自己使用场景从其中选择一种配置即可。
| 特点 | KV 数据库 | D1 数据库 |
|---|---|---|
| 读写性能 | 高 | 较低 |
| 免费额度 | 少 | 多 |
重要提示 KV 数据库和 D1 数据库只需要配置其中一个即可，不需要同时配置两个！建议根据上表选择适合自己的数据库类型。
3.1 KV 数据库配置
创建 KV 命名空间
- 在 Cloudflare Dashboard 中选择 “存储和数据库”
- 点击 “Workers KV”
- 点击 “创建实例”
- 输入命名空间名称：
img_url（建议使用此名称） - 点击 “创建”
绑定 KV 到项目
- 返回您的 Pages 项目
- 选择 “设置” → “绑定”
- 点击 “添加” → “KV 命名空间”
- 填写绑定信息：
- 变量名称：
img_url（必须是这个名称） - KV 命名空间：选择刚创建的命名空间
- 变量名称：
- 点击 “保存”
注意 绑定 KV 时，变量名称必须为
img_url，这是项目预设的变量名，填错会出现无法进入管理界面等情况。
🔄 第四步：重新部署
绑定数据库后需要重新部署以生效：
- 进入项目的 “部署” 页面
- 找到最新的部署记录
- 点击右侧的 ”…” 菜单
- 选择 “重试部署”
- 等待部署完成
配置 R2 渠道
服务器部署时默认添加了 Cloudflare R2 存储方式，以下步骤仅针对 Cloudflare 部署方式：
-
在项目设置中绑定 R2 存储桶：
- 选择 “设置” → “绑定”
- 添加 “R2 存储桶”
- 变量名称：
img_r2 - R2 存储桶：选择已创建的存储桶
-
在管理后台配置：
- 进入 “系统设置” → “上传设置”
- 配置 R2 渠道参数
- 如需图像审查，填入 R2 公开访问链接
提示
请注意Cloudflare R2 的免费额度限制，超过后可能会产生费用。
🔒 安全设置
设置后台密码：安全相关设置，在管理后台的 “系统设置” → “安全设置” 中配置
认证管理
- 用户端认证：用于 Web 端用户登录和 API 认证
- 管理端认证： 管理员用户名和密码，用于访问管理后台
🎈PicGo上传图片
-
PicGo插件设置中搜索
web-uploader-custom-url-prefix，安装可自定义前缀的版本，如图：
-
打开
图床设置->自定义Web图床->Default，然后按照下图方式配置，注意API地址和自定义图片URL前缀按照自己的域名进行修改。（如果设置了AUTH_CODE，一定以?authCode=your_authCode的方式添加到API地址后面）：
-
设置完成，确定即可使用PicGo上传到自建的图床。
PicGo压缩图片：
插件名称：compress-next
点击齿轮 -> 选择启用 transformer - compress-next
Config配置：
- Compress Type：imagemin-webp（上传图片时压缩图片并转换格式为webp）
- Gif compress Type：imagemin-gif2webp
PicGo上传图片插件：
插件名称：web-uploader-custom-url-prefix
教程：https://cfbed.sanyue.de/qa/#q-%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87picgo%E4%B8%8A%E4%BC%A0
API地址处，如果设置的有上传密码（authCode）的，则写上传密码：upload?authCode=你的密码