CloudFlare-ImgBed

免费图片托管解决方案，基于 Cloudflare Pages 和 Telegram （文件大小不建议超过20MB，过大图片会自动压缩）。

体验地址：Sanyue ImgHub (demo-cloudflare-imgbed.pages.dev)

体验视频：CloudFlare免费图床，轻松守护你的每一份精彩！_哔哩哔哩_bilibili

相关优质博文（感谢每一位鼎力支持的热心大佬）：

前端仓库：MarSeventh/Sanyue-ImgHub

注意：本仓库为Telegraph-Image项目的重制版，如果你觉得本项目不错，在支持本项目的同时，也请支持原项目。

Important

由于telegraph图床被滥用，该项目上传渠道已切换至Telegram Channel，请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID，否则将无法正常使用上传功能。

1.Introduction

免费图片托管解决方案，保留原版全部功能（后台管理、图片审查等）的基础上，实现了登录鉴权、页面自定义、上传图片预览、一键切换上传方式（拖拽上传、粘贴上传）、多文件上传、整体复制、多格式复制、上传前自动压缩（提升加载性能）等功能。

此外，拖拽上传的方式并没有严格限制文件类型，理论上你可以上传任何不超过20MB的文件，但是暂时不会针对图片和视频外的文件进行特殊优化和适配。

2.Features

开源
- 前端开源（可自行修改、打包使用）
炫酷的动效（
- 流畅丝滑的过渡动画~
- 上传文件实现呼吸灯效果
人性化上传
- 支持一键切换上传方式（拖拽点击、粘贴）
- 粘贴上传支持文件和URL
- 支持批量上传（不限同时选择文件数量，但为了保证稳定性，同时处于上传状态的文件最多为10个）
- 上传显示实时上传进度
- 上传后图片无需手动点击，可直接展示在管理页面中
- 过大图片在前端进行压缩，提升上传稳定性和加载性能
多样化复制
- 支持整体复制和单独复制（整体复制即将所有链接通过换行串联起来后复制）
- 支持MarkDown、HTML、BBCode和原始链接四种格式复制
- 上传完成后直观展示四种格式链接
支持身份认证、防滥用
- 支持Web和API上传认证（感谢hl128k）
- 支持访问域名限制（感谢hl128k）
支持页面自定义
- 页面背景支持单图、自定义多图轮播、bing随机图轮播等多种模式
- 自定义图床名称和Logo
- 自定义网站标题和Icon
一些小功能
- 支持随机图API，从图床中随机返回一张图片
以及原版所有特性

1.无限图片储存数量，你可以上传不限数量的图片

2.无需购买服务器，托管于 Cloudflare 的网络上，当使用量不超过 Cloudflare 的免费额度时，完全免费

3.无需购买域名，可以使用 Cloudflare Pages 提供的*.pages.dev的免费二级域名，同时也支持绑定自定义域名

4.支持图片审查 API，可根据需要开启，开启后不良图片将自动屏蔽，不再加载

5.支持后台图片管理，可以对上传的图片进行在线预览，添加白名单，黑名单等操作

3.Deployment

3.1直接使用

注意修改完环境变量，重新部署才能生效，见3.1章最后一节

3.1.1提前准备

Telegram的BOT_TOKEN和CHAT_ID

首先需要拥有一个Telegram账户，然后按照以下步骤获取BOT_TOKEN和CHAT_ID。
1. 向@BotFather发送/newbot，按照提示输入bot的备注、用户名等信息。成功创建后获得BOT_TOKEN。
2. 创建一个新的频道（Channel），进入新建的频道，选择频道管理，将刚才创建的机器人设为频道管理员。
3. 向@VersaToolsBot发消息，按步骤操作获取CHAT_ID（频道ID）
部署于Cloudflare

需准备一个Cloudflare账户，然后按照3.1.2.1节的步骤即可完成部署。
部署于服务器

如果Cloudflare的有限访问次数不能满足你的需求，并且你拥有自己的服务器，可以参照3.1.2.2节的教程在服务器上模拟Cloudflare的环境，并开放对应的端口访问服务。

注意由于服务器操作系统、硬件版本复杂多样，相关教程无法确保适合每一位用户，遇到报错请尽量利用搜索引擎解决，无法解决也可以提issue寻求帮助。

3.1.2手把手教程

3.1.2.1部署于Cloudflare

依托于CF的强大能力，只需简单几步，即可部署本项目，拥有自己的图床。

Fork 本仓库 (注意：必须使用 Git 或者 Wrangler 命令行工具部署后才能正常使用，文档)
打开 Cloudflare Dashboard，进入 Pages 管理页面，选择创建项目，选择连接到 Git 提供程序

按照页面提示输入项目名称，选择需要连接的 git 仓库，点击部署站点
将3.1.1中获取的BOT_TOKEN和CHAT_ID分别添加到环境变量中，对应环境变量名为TG_BOT_TOKEN和TG_CHAT_ID。
重试部署，此时项目即可正常使用

3.1.2.2部署于服务器

安装服务器操作系统对应的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，至此，正常情况下项目已经成功部署。

程序默认运行在8080端口上，使用nginx等服务器反代127.0.0.1:8080即可外网访问服务。如需修改端口，可在package.json中修改start脚本的port参数（如下图）。

正常启动，控制台输出如下：

3.1.3后台管理

后台管理默认关闭，需按照如下方式开启：

绑定KV数据库：
- 创建一个新的KV数据库
- 进入项目对应设置->函数->KV 命名空间绑定->编辑绑定->变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库
配置管理员认证：
- 项目对应设置->环境变量->为生产环境定义变量->编辑变量 ，添加BASIC_USER作为管理员用户名，BASIC_PASS作为管理员登录密码
重新部署项目：
- 进入项目对应部署->所有部署，选择最新的一个，点击后面更多按钮（···），选择重试部署
- 部署完成后，访问http(s)://你的域名/admin即可进入后台管理页面

3.1.4图片审查

支持成人内容审查和自动屏蔽，开启步骤如下：

前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的 API key
打开 Cloudflare Pages 项目的管理页面，依次点击设置，环境变量，添加环境变量
添加一个变量名称为ModerateContentApiKey，值为第一步获得的API key，点击保存即可

3.1.5Web和API上传认证

环境变量增加认证码AUTH_CODE，值为你想要设置的认证码。

Web端在登录页面输入你的认证码即可登录使用。

API格式：

接口名称	/upload
接口功能	上传图片或视频
请求方法	POST
请求参数	Query参数： `authCode`，string类型，即为你设置的认证码 Body参数(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"
    }
]

3.1.6访问域名限制

环境变量增加ALLOWED_DOMAINS，多个允许的域名用英文,分割，如：域名.xyz,域名.cloudns.be,域名.pp.ua

3.1.7页面自定义（DIY接口）

环境变量增加USER_CONFIG，JSON格式，具体字段用途及内容规范见下表。

字段名	用途	类型	内容规范
loginBkImg	自定义登录页面背景	列表/字符串	1、当字段类型为`列表`时，列表中元素为需要添加到轮播列表中的图片链接（列表中只有一张图时即为固定背景），形如`["1.jpg","2.jpg"]` 2、当字段类型为`字符串`时，目前仅支持字符串值为`bing`，设置为该值时启用bing随机图片轮播模式。
uploadBkImg	自定义上传页面背景	列表/字符串	同上
ownerName	页内图床名称	字符串	只支持`字符串`类型，设置为你自定义的图床名称（默认为`Sanyue`）
logoUrl	页内图床Logo	字符串	只支持`字符串`类型，设置为你自定义的图床Logo链接
siteTitle	网站标题	字符串	只支持`字符串`类型，设置为你自定义的网站标题
siteIcon	网站图标	字符串	只支持`字符串`类型，设置为你自定义的网站图标链接

整体示例：

轮播模式：
{
"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"
}

3.1.8远端遥测

便于开发者进行bug的捕捉和定位，但是过程中可能收集到访问链接、域名等信息，如您不愿意泄露类似信息给项目开发者，可在环境变量中添加disable_telemetry为true来退出遥测。

3.1.9随机图API

接口名称	/random
接口功能	从图床中随机返回一张图片的链接（注意会消耗列出次数）
前置条件	设置`AllowRandom`环境变量，值为`true`
请求方法	GET
请求参数	Query参数： `type`：设为`img`时直接返回图片（此时form不生效）；设为`url`时返回完整url链接；否则返回随机图的文件路径。 `form`:设为`text`时直接返回文本，否则返回json格式内容。
响应格式	1、当`type`为`img`时：返回格式为`image/jpeg` 2、当`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"
}

3.1.10注意！！！

修改环境变量方式：

修改环境变量后需要重新部署才能生效！

3.2定制化修改

按照3.1步骤部署完成后，前往仓库MarSeventh/Sanyue-ImgHub，按照操作说明进行DIY和打包操作，最后将打包好的/dist目录中的内容替换到该仓库的根目录下即可（复制+替换）。

4.TODO

4.1Add Features💕

~~增加粘贴图片上传功能（2024.7.22已完成）~~
~~增加markdown、html等格式链接复制功能（2024.7.21已完成）~~
~~上传页面增加管理端入口（2024.7.21已完成）~~
增加用户个性化配置接口
- ~~登录页面和上传页面背景图自定义（2024.8.25已完成）~~
- ~~图床名称和Logo自定义（2024.8.26已完成）~~
- ~~网站标题和Icon自定义（2024.8.26已完成）~~
~~增加随机图API（2024.7.25已完成）~~
~~完善多格式链接展示形式，增加ubb格式链接支持（2024.8.21已完成）~~
~~完善登录逻辑，后端增加认证码校验接口（2024.8.21已完成）~~
~~支持URL粘贴上传（2024.8.23已完成）~~
~~支持大于5MB的图片上传前自动压缩（2024.8.26已完成）~~

4.2Fix Bugs👻

~~修复API上传无法直接展示在后台的问题（2024.7.25已修复）~~
~~由于telegra.ph关闭上传，迁移至TG频道上传（2024.9.7已修复）~~

5.Q&A

5.1未设置`ALLOWED_DOMAINS`，但无法跨域访问？

请检查你的cloudflare防火墙设置（例如hotlink保护是否开启）
参见Issue #8

5.2如何通过PicGo上传？

PicGo插件设置中搜索web-uploader，安装可自定义前缀的版本，如图：
打开图床设置->自定义Web图床->Default，然后按照下图方式配置，注意API地址和自定义图片URL前缀按照自己的域名进行修改。（如果设置了AUTH_CODE，一定以?authCode=your_authCode的方式添加到API地址后面）：
设置完成，确定即可使用PicGo上传到自建的图床。

6.Tips

前端开源，参见MarSeventh/Sanyue-ImgHub项目。

如果觉得项目不错希望您能给个免费的star✨✨✨，非常感谢！

elfcute/CloudFlare-ImgBed

CloudFlare-ImgBed

1.Introduction

2.Features

3.Deployment

3.1直接使用

3.1.1提前准备

3.1.2手把手教程

3.1.2.1部署于Cloudflare

3.1.2.2部署于服务器

3.1.3后台管理

3.1.4图片审查

3.1.5Web和API上传认证

3.1.6访问域名限制

3.1.7页面自定义（DIY接口）

3.1.8远端遥测

3.1.9随机图API

3.1.10注意！！！

3.2定制化修改

4.TODO

4.1Add Features💕

4.2Fix Bugs👻

5.Q&A

5.1未设置`ALLOWED_DOMAINS`，但无法跨域访问？

5.2如何通过PicGo上传？

6.Tips

7.Star History

elfcute/CloudFlare-ImgBed

CloudFlare-ImgBed

1.Introduction

2.Features

3.Deployment

3.1直接使用

3.1.1提前准备

3.1.2手把手教程

3.1.2.1部署于Cloudflare

3.1.2.2部署于服务器

3.1.3后台管理

3.1.4图片审查

3.1.5Web和API上传认证

3.1.6访问域名限制

3.1.7页面自定义（DIY接口）

3.1.8远端遥测

3.1.9随机图API

3.1.10注意！！！

3.2定制化修改

4.TODO

4.1Add Features💕

4.2Fix Bugs👻

5.Q&A

5.1未设置ALLOWED_DOMAINS，但无法跨域访问？

5.2如何通过PicGo上传？

6.Tips

7.Star History

5.1未设置`ALLOWED_DOMAINS`，但无法跨域访问？