免费图片/文件托管解决方案，基于 Cloudflare Pages 和 Telegram，支持 Telegram Bot 存储渠道和 Cloudflare R2 存储渠道。
公告
部署使用出现问题，请先仔细查阅文档、常见问题解答以及已有issues。注意：本仓库为Telegraph-Image项目的重制版，如果你觉得本项目不错，在支持本项目的同时，也请支持原项目。
由于telegraph图床被滥用，该项目上传渠道已切换至Telegram Channel，请更新至最新版（更新方式见第3.1章最后一节），按照文档中的部署要求设置
TG_BOT_TOKEN和TG_CHAT_ID，否则将无法正常使用上传功能。此外，目前KV数据库为必须配置，如果以前未配置请按照文档说明配置。
出现问题，请先查看第5节常见问题Q&A部分。
体验地址及优质博文、视频（搭建或使用有问题可以先去里面学习哦~）
体验地址：CloudFlare ImgBed
访问码：cfbed
体验视频：CloudFlare免费图床，轻松守护你的每一份精彩！_哔哩哔哩_bilibili
相关教程视频：
相关优质博文（感谢每一位鼎力支持的热心大佬）：
更新日志
Add Features:
- 管理端增加批量黑名单、白名单功能
Add Features:
- 优化blockimg、whitelistmode、404等返回状态的缓存策略，尽可能减少回源请求(参考文档
3.1.3.9管理端删除、拉黑等操作优化进行设置)
Add Features:
- 后端支持上传失败自动切换其他渠道重试
- 优化404、blockimg、whitelistmode等返回状态的显示样式
Add Features:
- 进行删除、加入白名单、加入黑名单等操作时，自动清除CF CDN缓存，避免延迟生效(参考文档
3.1.3.9管理端删除、拉黑等操作优化进行设置)
Add Features:
- 文件详情增加文件大小记录
Add Features:
- 开放更多文件格式
Fix Bugs:
- 读取文件响应头增加允许跨域头
access-control-allow-origin: *
Add Features:
- 支持自定义命名方式（仅原名 or 仅随机前缀 or 默认的随机前缀_原名）
- Telegram Channel渠道上传文件记录机器人和频道数据，便于迁移和备份
- 支持自定义链接前缀
Fix Bugs:
- R2渠道在管理端删除时，存储桶同步删除
Add Features:
- 增加对R2 bucket的支持
Add Features:
- 页脚增加自定义传送门功能
Add Features:
- 上传页面右下角工具栏样式重构，支持上传页自定义压缩（上传前+存储端）
- 增加仅删除上传成功图片、上传失败图片重试
Add Features:
- 上传页面点击链接时，自动复制到剪切板
- 上传设置记忆（上传方式、链接格式等）
Fix Bugs:
- 若未设置密码，无需跳转登录页
Add Features:
- 优化粘贴上传时的文件命名方法
Add Features:
- 增加背景透明度支持自定义
Add Features:
- 支持背景切换时间自定义
Add Features:
- 支持大于5MB的图片上传前自动压缩
- 图床名称和Logo支持自定义
- 网站标题和Icon支持自定义
Add Features:
- 支持URL粘贴上传
Add Features:
- 完善多格式链接展示形式，增加UBB格式链接支持
- 完善登录逻辑，后端增加认证码校验接口
Add Features:
- 增加随机图API
Fix Bugs:
- 修复API上传无法直接展示在后台的问题
Add Features:
- 增加粘贴图片上传功能
Add Features:
- 增加Markdown、HTML等格式链接复制功能
- 上传页面增加管理端入口
免费图片托管解决方案（支持存储绝大多数常见格式的图片、视频、动图等），具有后台管理、图片审查、登录鉴权、页面自定义、多种方式及多文件上传、多文件及多格式链接复制等功能（详见第2章)。
此外，上传并没有严格限制文件类型，理论上你可以上传任何文件，但是暂时不会针对图片和视频外的文件进行特殊优化和适配。
项目特性
-
开源
- 前端开源（可自行修改、打包使用）
-
炫酷的动效（
- 流畅丝滑的过渡动画~
- 上传文件实现呼吸灯效果
-
人性化上传
-
覆盖大多数文件格式：支持绝大多数常见图片、视频、动图等，同时也支持其他大多数格式的文件
-
支持多种存储渠道：支持 Telegram Bot, Cloudflare R2 等多种存储渠道一键切换
Telegram Bot渠道：上传文件大小限制为20MB，提供客户端和服务端压缩功能
Cloudflare R2渠道：上传大小不限，但超过免费额度会扣费，详见Pricing | Cloudflare R2 docs
-
上传方式多样：支持多种上传方式（拖拽点击、粘贴）（Web/API)
- 粘贴上传支持文件和URL
- 支持批量上传（不限同时选择文件数量，但为了保证稳定性，同时处于上传状态的文件最多为10个）
- 上传显示实时上传进度
- Web和API端上传图片，均可直接展示在管理页面中
- 过大图片在前端进行压缩，提升上传稳定性和加载性能;支持自定义压缩质量，自定义开启前后端压缩功能
-
-
多样化复制
-
支持整体复制和单独复制（整体复制即将所有链接通过换行串联起来后复制）
- 支持MarkDown、HTML、BBCode和原始链接四种格式复制
- 上传完成后直观展示四种格式链接
-
支持设置自定义链接前缀，便于接入三方CDN服务
-
-
支持身份认证、防滥用
-
支持页面自定义
-
背景自定义
- 页面背景支持单图、自定义多图轮播、bing随机图轮播等多种模式
- 背景透明度、切换时间支持自定义
-
网站信息自定义
- 自定义图床名称和Logo
- 自定义网站标题和Icon
- 页脚传送门自定义
-
-
一些小功能
- 支持随机图API，从图床中随机返回一张图片
-
以及原版所有特性
1.无限图片储存数量，你可以上传不限数量的图片
2.无需购买服务器，托管于 Cloudflare 的网络上，当使用量不超过 Cloudflare 的免费额度时，完全免费
3.无需购买域名，可以使用 Cloudflare Pages 提供的
*.pages.dev的免费二级域名，同时也支持绑定自定义域名4.支持图片审查 API，可根据需要开启，开启后不良图片将自动屏蔽，不再加载
5.支持后台图片管理，可以对上传的图片进行在线预览，添加白名单，黑名单等操作
注意修改完环境变量，重新部署才能生效，见3.1章最后一节；版本更新方式，也请见3.1章最后一节
详细部署教程
根据所需开通的渠道进行以下准备
-
开通Telegram Bot渠道：Telegram的
TG_BOT_TOKEN和TG_CHAT_IDTG_BOT_TOKEN和TG_CHAT_ID的获取方式
首先需要拥有一个Telegram账户，然后按照以下步骤获取
TG_BOT_TOKEN和TG_CHAT_ID。-
向@BotFather发送
/newbot，按照提示输入bot的备注、用户名等信息。成功创建后获得TG_BOT_TOKEN。
-
创建一个新的频道（Channel），进入新建的频道，选择频道管理，将刚才创建的机器人设为频道管理员。
-
向@VersaToolsBot转发一条第2步新建频道中的消息，获取
TG_CHAT_ID（频道ID）
-
-
开通Cloudflare R2渠道：新建一个Cloudflare R2存储桶，前提是需要绑定支付方式。
Cloudflare R2渠道开通方式
-
前往Cloudflare Dashboard，选择
R2 存储对象
-
选择
创建存储桶，名称随意，填完后点击创建存储桶即可完成创建
-
根据需求可选操作：如果需要启用图像审查，需要开启存储桶的公网访问权限，有两种开启方式，详见下图。无论你选择哪种方式，都需要记下完整的公网访问链接，格式为
https://xxxx.xxx
-
根据自己需求部署在CloudFlare或服务器上
需准备一个Cloudflare账户，然后按照以下步骤即可完成部署。
部署在Cloudflare上的方式
依托于CF的强大能力，只需简单几步，即可部署本项目，拥有自己的图床。
-
Fork 本仓库
-
打开 Cloudflare Dashboard，进入 Pages 管理页面，选择创建项目，选择
连接到 Git 提供程序
-
按照页面提示输入项目名称，选择需要连接的 git 仓库，点击
部署站点 -
根据所需存储渠道进行相关设置：
-
Telegram 渠道：将3.1.1中获取的TG_BOT_TOKEN和TG_CHAT_ID分别添加到环境变量中，对应环境变量名为TG_BOT_TOKEN和TG_CHAT_ID -
Cloudflare R2 渠道：-
将前面新建的存储桶绑定到项目，名称为
img_r2
-
如果后续要开启图像审查，需要设置
R2PublicUrl环境变量，值为前面记下的R2存储桶公网访问链接：
-
-
-
绑定KV数据库：
-
创建一个新的KV数据库
-
进入项目对应
设置->函数->KV 命名空间绑定->编辑绑定->变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库
-
-
重试部署，此时项目即可正常使用
如果Cloudflare的有限访问次数不能满足你的需求，并且你拥有自己的服务器，可以参照3.1.2.2节的教程在服务器上模拟Cloudflare的环境，并开放对应的端口访问服务。
注意由于服务器操作系统、硬件版本复杂多样，相关教程无法确保适合每一位用户，遇到报错请尽量利用搜索引擎解决，无法解决也可以提issue寻求帮助。
部署在服务器上的方式
-
安装服务器操作系统对应的
node.js，经测试v22.5.1版本可以正常使用。（安装教程自行search） -
切换到项目根目录，运行
npm install，安装所需依赖。 -
在项目根目录下新建
wrangler.toml配置文件，其内容为项目名称，环境变量（包括TG_BOT_TOKEN和TG_CHAT_ID等参数）等，可根据后文环境变量配置进行个性化修改。（详情参见官方文档Configuration - Wrangler (cloudflare.com)）配置文件样例：
name = "cloudflare-imgbed" compatibility_date = "2024-07-24" [vars] ModerateContentApiKey = "your_key" AllowRandom = "true" BASIC_USER = "user" BASIC_PASS = "pass" TG_BOT_TOKEN = "your_bot_token" TG_CHAT_ID = "your_bot_id"
-
在项目根目录下运行
npm run start，至此，正常情况下项目已经成功部署。项目默认支持通过服务器本地模拟的R2存储上传。程序默认运行在
8080端口上，使用nginx等服务器反代127.0.0.1:8080即可外网访问服务。如需修改端口，可在package.json中修改start脚本的port参数（如下）。"scripts": { "ci-test": "concurrently --kill-others \"npm start\" \"wait-on http://localhost:8080 && mocha\"", "test": "mocha", "start": "npx wrangler pages dev ./ --kv \"img_url\" --r2 \"img_r2\" --port 8080 --persist-to ./data" }
正常启动，控制台输出如下：
后台认证、自定义页面等设置
后台管理页面默认不设密码，需按照如下方式设置认证：
-
配置管理员认证：
- 项目对应
设置->环境变量->为生产环境定义变量->编辑变量，添加BASIC_USER作为管理员用户名，BASIC_PASS作为管理员登录密码
- 项目对应
-
重新部署项目：
-
进入项目对应
部署->所有部署，选择最新的一个，点击后面更多按钮（···），选择重试部署 -
部署完成后，访问
http(s)://你的域名/dashboard即可进入后台管理页面
-
支持成人内容审查和自动屏蔽，开启步骤如下：
- 前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的 API key
- 打开 Cloudflare Pages 项目的管理页面，依次点击
设置，环境变量，添加环境变量 - 添加一个
变量名称为ModerateContentApiKey，值为第一步获得的API key，点击保存即可
环境变量增加认证码AUTH_CODE，值为你想要设置的认证码。
Web端在登录页面输入你的认证码即可登录使用；API端需要在上传链接中后缀authCode参数，详见API文档。
环境变量增加ALLOWED_DOMAINS，多个允许的域名用英文,分割，如：域名.xyz,域名.cloudns.be,域名.pp.ua
环境变量增加WhiteList_Mode，设置为true即可开启白名单模式，仅设置为白名单的图片可被访问。
设置方式
环境变量增加USER_CONFIG，JSON格式（设置时类型选text即可），具体字段用途及内容规范见下表。
| 字段名 | 用途 | 类型 | 内容规范 |
|---|---|---|---|
| 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 | 页脚传送门链接 | 字符串 | 只支持字符串类型，设置为你自定义的传送地址（如个人博客链接） |
整体示例：
轮播模式： { "uploadBkImg": ["https://imgbed.sanyue.site/file/6910f0b5e65ed462c1362.jpg","https://imgbed.sanyue.site/file/a73c97a1e8149114dc750.jpg"], "loginBkImg":["https://imgbed.sanyue.site/file/ef803977f35a4ef4c03c2.jpg","https://imgbed.sanyue.site/file/0dbd5add3605a0b2e8994.jpg"], "ownerName": "Sanyue", "logoUrl": "https://demo-cloudflare-imgbed.pages.dev/random?type=img" } bing随机图模式： { "uploadBkImg": "bing", "loginBkImg": "bing" }
便于开发者进行bug的捕捉和定位，但是过程中可能收集到访问链接、域名等信息，如您不愿意泄露类似信息给项目开发者，可在环境变量中添加disable_telemetry为true来退出遥测。
设置AllowRandom环境变量，值为true，以从图床中随机获取一张图片，详见API文档。
正常情况下，因为CloudFlare CDN缓存的存在，在管理端进行删除、拉黑、加白名单等操作不会立即生效，需要等到缓存过期才能生效。
为了让操作立即生效，请添加CF_ZONE_ID、CF_EMAIL、CF_API_KEY环境变量，获取方式如下：
操作详情
CF_ZONE_ID:
CF_EMAIL:即登录CloudFlare账号的邮箱
CF_API_KEY:
环境变量修改、程序更新等教程
- 修改环境变量方式：
修改环境变量后需要重新部署才能生效！
- 程序更新方式：
去到 Github 你之前 fork 过的仓库依次选择Sync fork->Update branch即可，稍等一会，Cloudflare Pages 检测到仓库更新之后便会自动部署最新代码。
如果有新的环境变量需要添加，请根据文档要求进行添加，然后重试部署。
按照3.1步骤部署完成后，前往仓库MarSeventh/Sanyue-ImgHub，按照操作说明进行DIY和打包操作，最后将打包好的/dist目录中的内容替换到该仓库的根目录下即可（复制+替换）。
API文档
| 接口名称 | /upload |
|---|---|
| 接口功能 | 上传图片或视频 |
| 请求方法 | POST |
| 请求参数 | Query参数：authCode: string类型，即为你设置的认证码serverCompress: boolean类型，表示是否开启服务端压缩（仅针对图片文件、Telegram上传渠道生效，默认为true）uploadChannel: string类型，取值为telegram和cfr2，分别代表telegram bot渠道和Cloudflare R2渠道，默认为telegram 渠道autoRetry: boolean类型，表示是否开启上传失败自动切换渠道重试，默认开启uploadNameType: string类型，表示文件命名方式，可选值为[default, index, origin]，分别代表默认前缀_原名命名、仅前缀命名和仅原名命名法，默认为defaultBody参数(application/form-data)： file: file类型，你要上传的文件 |
| 返回响应 | data[0].src为获得的图片链接（注意不包含域名，需要自己添加） |
请求示例：
curl --location --request POST 'https://your.domain/upload?authCode=your_authCode' \ --header 'User-Agent: Apifox/1.0.0 (https://apifox.com)' \ --form 'file=@"D:\\杂文件\\壁纸\\genshin109.jpg"'响应示例：
[ { "src": "/file/738a8aaacf4d88d1590f9.jpg" } ]
| 接口名称 | /random |
|---|---|
| 接口功能 | 从图床中随机返回一张图片的链接（注意会消耗列出次数） |
| 前置条件 | 设置AllowRandom环境变量，值为true |
| 请求方法 | GET |
| 请求参数 | Query参数：type: 设为img时直接返回图片（此时form不生效）；设为url时返回完整url链接；否则返回随机图的文件路径。form: 设为text时直接返回文本，否则返回json格式内容。 |
| 响应格式 | 1、当type为img时：返回格式为 image/jpeg2、当 type为其他值时：当 form不是text时，返回JSON格式内容，data.url为返回的链接/文件路径。否则，直接返回链接/文件路径。 |
请求示例：
curl --location --request GET 'https://your.domain/random' \ --header 'User-Agent: Apifox/1.0.0 (https://apifox.com)'响应示例：
{ "url": "/file/4fab4d423d039b4665a27.jpg" }
功能更新列表
- ✅
增加粘贴图片上传功能（2024.7.22已完成） - ✅
增加markdown、html等格式链接复制功能（2024.7.21已完成） - ✅
上传页面增加管理端入口（2024.7.21已完成） - 📝增加用户个性化配置接口
登录页面和上传页面背景图自定义（2024.8.25已完成）图床名称和Logo自定义（2024.8.26已完成）网站标题和Icon自定义（2024.8.26已完成）背景切换时间自定义（2024.9.11已完成）背景透明度支持自定义（2024.9.12已完成）页脚自定义传送门（2024.10.20已完成）
- ✅
增加随机图API（2024.7.25已完成） - ✅
完善多格式链接展示形式，增加ubb格式链接支持（2024.8.21已完成） - ✅
完善登录逻辑，后端增加认证码校验接口（2024.8.21已完成） - ✅
支持URL粘贴上传（2024.8.23已完成） - ✅
支持大于5MB的图片上传前自动压缩（2024.8.26已完成） - ✅
上传页面右下角工具栏样式重构，支持上传页自定义压缩（上传前+存储端）（2024.9.28已完成） - ⏳重构管理端，认证+显示效果优化，增加图片详情页
- ⏳管理端增加访问量统计，IP记录、IP黑名单、上传IP黑名单等
- ✅
上传页面点击链接，自动复制到剪切板(2024.9.27已完成) - ✅
上传设置记忆（上传方式、链接格式等）（2024.9.27已完成，两种上传方式合并） - ✅
若未设置密码，无需跳转进入登录页（2024.9.27已完成） - ✅
增加仅删除上传成功图片、上传失败图片重试（2024.9.28已完成） - ✅
优化粘贴上传时文件命名方法（2024.9.26已完成） - ✅
增加对R2 bucket的支持（2024.11.5已完成） - ✅
管理端增加批量黑名单、白名单功能（2024.12.14已完成） - ✅
Telegram Channel渠道上传文件记录机器人和频道数据，便于迁移和备份（2024.12.4已完成） - ✅
支持自定义命名方式（仅原名 or 仅随机前缀 or 默认的随机前缀_原名）（2024.12.4已完成） - ✅
支持上传失败自动切换其他渠道尝试（2024.12.12已完成） - ⏳后端list接口实现分页功能
- ✅
支持自定义链接前缀（2024.12.4已完成） - 📝对接alist，或实现webdav（评估中）
- ✅
文件详情增加文件大小记录（2024.12.10已完成） - ⏳支持管理员自定义全局默认链接前缀
- ✅
开放更多文件格式（2024.12.9已完成） - ✅
进行删除、加入白名单、加入黑名单等操作时，自动清除CF CDN缓存，避免延迟生效（2024.12.11已完成）
Bug修复列表
- ✅
修复API上传无法直接展示在后台的问题（2024.7.25已修复） - ✅
由于telegra.ph关闭上传，迁移至TG频道上传（2024.9.7已修复） - ✅
修复未设管理员认证时管理端无限刷新的问题（2024.9.9已修复） - ✅
修复部分视频无法预览播放的问题（经测试，暂定为文件自身存在问题，暂无法修复） - ⏳增加新的图片审查渠道
- ✅
R2渠道在管理端删除时，存储桶同步删除（2024.12.4已修复） - ✅
读取文件响应头增加允许跨域头（2024.12.9已修复）access-control-allow-origin: * - ✅
上传界面加入访问限制白名单（2024.12.11已修复）
常见问题解答
- 请检查你的cloudflare防火墙设置（例如hotlink保护是否开启）
- 参见Issue #8
-
PicGo插件设置中搜索
web-uploader，安装可自定义前缀的版本，如图：
-
打开
图床设置->自定义Web图床->Default，然后按照下图方式配置，注意API地址和自定义图片URL前缀按照自己的域名进行修改。（如果设置了AUTH_CODE，一定以?authCode=your_authCode的方式添加到API地址后面）：
-
设置完成，确定即可使用PicGo上传到自建的图床。
- 是否正确配置
TG_BOT_TOKEN、TG_CHAT_ID等环境变量 - 是否给机器人管理员配置足够的权限
- 是否正确绑定KV数据库
- 是否更新至最新版
- 前往issues寻找相似问题
- 注意看图，前面有
-
- 网络问题，尝试刷新页面
前端开源，参见MarSeventh/Sanyue-ImgHub项目。
打赏：项目维护不易，喜欢本项目的话，可以作者大大一点小小的鼓励哦，您的每一份支持都是我前进的动力~
如果觉得项目不错希望您能给个免费的star✨✨✨，非常感谢！