CloudFlare-ImgBed:基于TG和R2的优质开源图床
CloudFlare-ImgBed:基于TG和R2的优质开源图床
胜天半子CloudFlare-ImgBed:基于TG和R2的优质开源图床
点击标题即可打开Github源项目链接
简介
CloudFlare 图床，基于 CloudFlare Pages 的免费图片托管解决方案，支持 Telegram Bot 和 Cloudflare R2 等多种存储方式！
Demo
访问码：blog123
后台账号：blog123
密码：blog123
优点
免费图片托管解决方案（支持存储绝大多数常见格式的图片、视频、动图等），具有后台管理、图片审查、登录鉴权、页面自定义、多种方式及多文件上传、多文件及多格式链接复制等功能。此外，拖拽上传的方式并没有严格限制文件类型，理论上你可以上传任何文件，但是暂时不会针对图片和视频外的文件进行特殊优化和适配
炫酷的动效
- 流畅丝滑的过渡动画~
- 上传文件实现呼吸灯效果
人性化上传
支持绝大多数常见图片、视频、动图等
支持 Telegram Bot, Cloudflare R2 等多种存储渠道一键切换
Telegram Bot渠道：上传文件大小限制为20MB，提供客户端和服务端压缩功能
Cloudflare R2渠道：上传大小不限，但超过免费额度会扣费
支持多种上传方式（拖拽点击、粘贴）
粘贴上传支持文件和URL
支持批量上传（不限同时选择文件数量，但为了保证稳定性，同时处于上传状态的文件最多为10个）
上传显示实时上传进度
上传后图片无需手动点击，可直接展示在管理页面中
过大图片在前端进行压缩，提升上传稳定性和加载性能
支持自定义压缩质量，自定义开启前后端压缩功能
多样化复制
- 支持整体复制和单独复制（整体复制即将所有链接通过换行串联起来后复制）
- 支持MarkDown、HTML、BBCode和原始链接四种格式复制
- 上传完成后直观展示四种格式链接
保持耐心，有志竞成，让我们开始学习如何部署叭！！！
部署教程
- Pages部署CloudFlare-ImgBed项目
打开CloudFlare-ImgBed项目仓库，先给作者点击
Star后再点击Fork！可以增加成功率哦！！！手动狗头🤭回到 Workers 和 Pages > 概述 > 创建 > Pages > 连接到Git > 选择
CloudFlare-ImgBed项目 > 保存并部署即可
绑定KV数据库：
- 创建一个新的KV数据库，名字一定要为img_admin
- 进入项目对应
设置>函数>KV 命名空间绑定>编辑绑定>变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库 >重试部署即可
- 配置R2存储
- 3.1 创建R2储存桶
进入 Cloudflare R2 ，点击“创建”以创建一个R2储存桶，名字一定要是img-r2（我也不知道为什么不是这个就会报错）,位置选择亚太地区后点击创建存储桶
- 3.2 配置Cloudflare R2储存桶
创建之后进入第三个菜单设置，找到到 R2.dev 子域，设置为允许访问 ，并复制公共 R2.dev 存储桶 URL，保存以备用
- 3.3 配置
Cloudflare R2,前往后台依次点击设置>函数>R2 存储桶绑定>编辑绑定>变量名称填写：img_r2命名空间 选择你提前创建好的R2 存储桶绑定
注意：如果后续要开启公网访问，需要设置R2PublicUrl环境变量，值为下面的R2存储桶公网访问链接
- 后台管理认证
后台管理页面默认不设密码，需按照如下方式设置认证：
- 4.1 配置管理员认证：
- 项目对应
设置->环境变量->为生产环境定义变量->编辑变量，添加BASIC_USER作为管理员用户名，BASIC_PASS作为管理员登录密码->重试部署即可
变量说明
环境变量
| 变量名称 | 值 |
|---|---|
| AUTH_CODE | 设置的认证码。Web端在登录页面输入你的认证码即可登录使用 |
| BASIC_USER | <后台管理页面登录用户名称> |
| BASIC_PASS | <后台管理页面登录用户密码> |
| R2PublicUrl | R2存储桶公网访问链接 |
| ModerateContentApiKey | <审查图像内容的API key> |
| TG_BOT_TOKEN (必需) | 123468:AAxxxGKrn5 (从 @BotFather) |
| TG_CHAT_ID (必需) | -1234567 (频道的ID,TG Bot要是该频道或群组的管理员) |
TG_BOT_TOKEN
Telegram的TG_BOT_TOKEN和TG_CHAT_ID
首先需要拥有一个Telegram账户，然后按照以下步骤获取TG_BOT_TOKEN和TG_CHAT_ID。
- 向@BotFather发送
/newbot，按照提示输入bot的备注、用户名等信息。成功创建后获得TG_BOT_TOKEN。
- 创建一个新的频道（Channel），进入新建的频道，选择频道管理，将刚才创建的机器人设为频道管理员。
获取ID机器人 @VersaToolsBot
TG_CHAT_ID为目标对话的唯一标ID或目标频道的用户名（eg: @channelusername），当目标对话为个人或私有频道是只能是ID,当为公开频道或群组是可以为目标频道的用户名（eg:@channelusername）
- 向@VersaToolsBot发消息，按步骤操作获取
TG_CHAT_ID（频道ID）
页面自定义（DIY接口）
环境变量增加USER_CONFIG，JSON格式，具体字段用途及内容规范见下表。
| 字段名 | 用途 | 类型 | 内容规范 |
|---|---|---|---|
| loginBkImg | 自定义登录页面背景 | 列表/字符串 | 1、当字段类型为列表时，列表中元素为需要添加到轮播列表中的图片链接（列表中只有一张图时即为固定背景），形如["1.jpg","2.jpg"]2、当字段类型为 字符串时，目前仅支持字符串值为bing，设置为该值时启用bing随机图片轮播模式。 |
| uploadBkImg | 自定义上传页面背景 | 列表/字符串 | 同上 |
| bkInterval | 轮播背景切换时间间隔 | 正整数 | 设置为背景图的轮播时间，默认3000，单位ms。例如你希望10s切换一次，设置为 10000即可。 |
| bkOpacity | 背景图透明度 | (0,1)的浮点数 | 展示的背景图透明度，默认为1。如果你觉得显示效果不佳，可以自定义，如 0.8 |
| ownerName | 页内图床名称 | 字符串 | 只支持字符串类型，设置为你自定义的图床名称（默认为Sanyue） |
| logoUrl | 页内图床Logo | 字符串 | 只支持字符串类型，设置为你自定义的图床Logo链接 |
| siteTitle | 网站标题 | 字符串 | 只支持字符串类型，设置为你自定义的网站标题 |
| siteIcon | 网站图标 | 字符串 | 只支持字符串类型，设置为你自定义的网站图标链接 |
| footerLink | 页脚传送门链接 | 字符串 | 只支持字符串类型，设置为你自定义的传送地址（如个人博客链接） |
演示站整体示例：
2
3
4
5
6
7
8
9
10
11
12
{
"uploadBkImg": ["https://i1.wp.com/ruom.wuaze.com/i/2024/11/29/874007.webp"],
"loginBkImg":["https://i1.wp.com/ruom.wuaze.com/i/2024/11/29/874007.webp"],
"ownerName": "胜天半子's",
"siteTitle": "胜天半子的图床",
}
bing随机图模式：
{
"uploadBkImg": "bing",
"loginBkImg": "bing"
}