Home

Awesome

CloudFlare-ImgBed

免费图片/文件托管解决方案，基于 Cloudflare Pages 和 Telegram，支持 Telegram Bot 存储渠道和 Cloudflare R2 存储渠道。

前端仓库：MarSeventh/Sanyue-ImgHub

<details> <summary>公告</summary> 部署使用出现问题，请先仔细查阅文档、常见问题解答以及已有issues。

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

由于telegraph图床被滥用，该项目上传渠道已切换至Telegram Channel，请更新至最新版（更新方式见第3.1章最后一节），按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID，否则将无法正常使用上传功能。

此外，目前KV数据库为必须配置，如果以前未配置请按照文档说明配置。

出现问题，请先查看第5节常见问题Q&A部分。

</details> <details> <summary>体验地址及优质博文、视频（搭建或使用有问题可以先去里面学习哦~）</summary>

体验地址：CloudFlare ImgBed

访问码：cfbed

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

相关教程视频：

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

</details> <details> <summary>更新日志</summary>

2024.12.20

Add Features:

2024.12.14

Add Features:

2024.12.13

Add Features:

2024.12.12

Add Features:

2024.12.11

Add Features:

2024.12.10

Add Features:

2024.12.09

Add Features:

Fix Bugs:

2024.12.04

Add Features:

Fix Bugs:

2024.11.05

Add Features:

2024.10.20

Add Features:

2024.09.28

Add Features:

2024.09.27

Add Features:

Fix Bugs:

2024.09.26

Add Features:

2024.09.12

Add Features:

2024.09.11

Add Features:

2024.08.26

Add Features:

2024.08.23

Add Features:

2024.08.21

Add Features:

2024.07.25

Add Features:

Fix Bugs:

2024.07.22

Add Features:

2024.07.21

Add Features:

</details>

1.Introduction

免费图片托管解决方案（支持存储绝大多数常见格式的图片、视频、动图等），具有后台管理、图片审查、登录鉴权、页面自定义、多种方式及多文件上传、多文件及多格式链接复制等功能（详见第2章)。

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

CloudFlare

2.Features

<details> <summary>项目特性</summary> </details>

3.Deployment

3.1部署使用

注意修改完环境变量，重新部署才能生效，见3.1章最后一节；版本更新方式，也请见3.1章最后一节

<details> <summary>详细部署教程</summary>

3.1.1前期准备

<details> <summary>根据所需开通的渠道进行以下准备</summary> </details>

3.1.2部署教程

<details> <summary>根据自己需求部署在CloudFlare或服务器上</summary>

3.1.2.1部署于Cloudflare

需准备一个Cloudflare账户，然后按照以下步骤即可完成部署。

<details> <summary>部署在Cloudflare上的方式</summary>

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

  1. Fork 本仓库

  2. 打开 Cloudflare Dashboard，进入 Pages 管理页面，选择创建项目，选择连接到 Git 提供程序

  3. 按照页面提示输入项目名称，选择需要连接的 git 仓库，点击部署站点

  4. 根据所需存储渠道进行相关设置：

    • Telegram 渠道：将3.1.1中获取的TG_BOT_TOKEN和TG_CHAT_ID分别添加到环境变量中，对应环境变量名为TG_BOT_TOKEN和TG_CHAT_ID

    • Cloudflare R2 渠道：

      • 将前面新建的存储桶绑定到项目，名称为img_r2

      • 如果后续要开启图像审查，需要设置R2PublicUrl环境变量，值为前面记下的R2存储桶公网访问链接：

  5. 绑定KV数据库：

    • 创建一个新的KV数据库

    • 进入项目对应设置->函数->KV 命名空间绑定->编辑绑定->变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库

  6. 重试部署，此时项目即可正常使用

</details>

3.1.2.2部署于服务器

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

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

<details> <summary>部署在服务器上的方式</summary>

  1. 安装服务器操作系统对应的node.js，经测试v22.5.1版本可以正常使用。（安装教程自行search）

  2. 切换到项目根目录，运行npm install，安装所需依赖。

  3. 在项目根目录下新建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"

  4. 在项目根目录下运行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"
  }

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

    202408191829163

    </details>
</details>

3.1.3可选配置

<details> <summary>后台认证、自定义页面等设置</summary>

3.1.3.1后台管理认证

后台管理页面默认不设密码，需按照如下方式设置认证：

  1. 配置管理员认证：

    • 项目对应设置->环境变量->为生产环境定义变量->编辑变量 ，添加BASIC_USER作为管理员用户名，BASIC_PASS作为管理员登录密码

  2. 重新部署项目：

    • 进入项目对应部署->所有部署，选择最新的一个，点击后面更多按钮（···），选择重试部署

    • 部署完成后，访问http(s)://你的域名/dashboard即可进入后台管理页面

3.1.3.2图片审查

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

3.1.3.3Web和API上传认证

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

Web端在登录页面输入你的认证码即可登录使用；API端需要在上传链接中后缀authCode参数，详见API文档。

3.1.3.4访问域名限制

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

3.1.3.5白名单模式

环境变量增加WhiteList_Mode，设置为true即可开启白名单模式，仅设置为白名单的图片可被访问。

3.1.3.6自定义配置接口

<details> <summary>设置方式</summary>

环境变量增加USER_CONFIG，JSON格式（设置时类型选text即可），具体字段用途及内容规范见下表。

字段名用途类型内容规范
loginBkImg自定义登录页面背景列表/字符串1、当字段类型为列表时，列表中元素为需要添加到轮播列表中的图片链接（列表中只有一张图时即为固定背景），形如["1.jpg","2.jpg"]<br />2、当字段类型为字符串时，目前仅支持字符串值为bing，设置为该值时启用bing随机图片轮播模式。
uploadBkImg自定义上传页面背景列表/字符串同上
bkInterval轮播背景切换时间间隔正整数设置为背景图的轮播时间，默认3000，单位ms。<br />例如你希望10s切换一次，设置为10000即可。
bkOpacity背景图透明度(0,1]的浮点数展示的背景图透明度，默认为1。<br />如果你觉得显示效果不佳，可以自定义，如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"
}
</details>

3.1.3.7远端遥测

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

3.1.3.8随机图API

设置AllowRandom环境变量，值为true，以从图床中随机获取一张图片，详见API文档。

3.1.3.9管理端删除、拉黑等操作优化

正常情况下，因为CloudFlare CDN缓存的存在，在管理端进行删除、拉黑、加白名单等操作不会立即生效，需要等到缓存过期才能生效。

为了让操作立即生效，请添加CF_ZONE_ID、CF_EMAIL、CF_API_KEY环境变量，获取方式如下：

<details> <summary>操作详情</summary>

CF_ZONE_ID:

image-20241211123633692

CF_EMAIL:即登录CloudFlare账号的邮箱

CF_API_KEY:

image-20241211140019607

</details>
</details>

3.1.4其他操作指南

<details> <summary>环境变量修改、程序更新等教程</summary>
  1. 修改环境变量方式：

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

  1. 程序更新方式：

去到 Github 你之前 fork 过的仓库依次选择Sync fork->Update branch即可，稍等一会，Cloudflare Pages 检测到仓库更新之后便会自动部署最新代码。

如果有新的环境变量需要添加，请根据文档要求进行添加，然后重试部署。

</details> </details>

3.2定制化修改

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

4.Usage

4.1Web端使用方式

4.2API文档

<details> <summary>API文档</summary>

4.2.1上传API

接口名称/upload
接口功能上传图片或视频
请求方法POST
请求参数Query参数：<br />authCode: string类型，即为你设置的认证码<br />serverCompress: boolean类型，表示是否开启服务端压缩（仅针对图片文件、Telegram上传渠道生效，默认为true）<br />uploadChannel: string类型，取值为telegram和cfr2，分别代表telegram bot渠道和Cloudflare R2渠道，默认为telegram 渠道<br />autoRetry: boolean类型，表示是否开启上传失败自动切换渠道重试，默认开启<br />uploadNameType: string类型，表示文件命名方式，可选值为[default, index, origin]，分别代表默认前缀_原名命名、仅前缀命名和仅原名命名法，默认为default<br />Body参数(application/form-data)：<br />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"
 }
]

4.2.2随机图API

接口名称/random
接口功能从图床中随机返回一张图片的链接（注意会消耗列出次数）
前置条件设置AllowRandom环境变量，值为true
请求方法GET
请求参数Query参数：<br />content:返回的文件类型，可选值有[image, video]，多个使用,分隔，默认为image<br />type: 设为img时直接返回图片（此时form不生效）；设为url时返回完整url链接；默认返回随机图的文件路径。<br />form: 设为text时直接返回文本，默认返回json格式内容。
响应格式1、当type为img时：<br />返回格式为image/jpeg<br />2、当type为其他值时：<br />当form不是text时，返回JSON格式内容，data.url为返回的链接/文件路径。<br />否则，直接返回链接/文件路径。

请求示例：

curl --location --request GET 'https://your.domain/random' \
--header 'User-Agent: Apifox/1.0.0 (https://apifox.com)'

响应示例：

{
 "url": "/file/4fab4d423d039b4665a27.jpg"
}
</details>

5.TODO

5.1Add Features💕

<details> <summary>功能更新列表</summary>
  1. :white_check_mark: 增加粘贴图片上传功能（2024.7.22已完成）
  2. :white_check_mark:增加markdown、html等格式链接复制功能（2024.7.21已完成）
  3. :white_check_mark:上传页面增加管理端入口（2024.7.21已完成）
  4. :memo:增加用户个性化配置接口
    • 登录页面和上传页面背景图自定义（2024.8.25已完成）
    • 图床名称和Logo自定义（2024.8.26已完成）
    • 网站标题和Icon自定义（2024.8.26已完成）
    • 背景切换时间自定义（2024.9.11已完成）
    • 背景透明度支持自定义（2024.9.12已完成）
    • 页脚自定义传送门（2024.10.20已完成）
  5. :white_check_mark:增加随机图API（2024.7.25已完成）
  6. :white_check_mark:完善多格式链接展示形式，增加ubb格式链接支持（2024.8.21已完成）
  7. :white_check_mark:完善登录逻辑，后端增加认证码校验接口（2024.8.21已完成）
  8. :white_check_mark:支持URL粘贴上传（2024.8.23已完成）
  9. :white_check_mark:支持大于5MB的图片上传前自动压缩（2024.8.26已完成）
  10. :white_check_mark:上传页面右下角工具栏样式重构，支持上传页自定义压缩（上传前+存储端）（2024.9.28已完成）
  11. :white_check_mark:重构管理端，认证+显示效果优化，增加图片详情页（2024.12.20已完成）
  12. :white_check_mark:管理端增加访问量统计，IP记录、IP黑名单、上传IP黑名单等（2024.12.20已支持上传ip黑名单，访问记录由于对KV读写消耗太大，暂时搁置）
  13. :white_check_mark:上传页面点击链接，自动复制到剪切板(2024.9.27已完成)
  14. :white_check_mark:上传设置记忆（上传方式、链接格式等）（2024.9.27已完成，两种上传方式合并）
  15. :white_check_mark:若未设置密码，无需跳转进入登录页（2024.9.27已完成）
  16. :white_check_mark:增加仅删除上传成功图片、上传失败图片重试（2024.9.28已完成）
  17. :white_check_mark:优化粘贴上传时文件命名方法（2024.9.26已完成）
  18. :white_check_mark:增加对R2 bucket的支持（2024.11.5已完成）
  19. :white_check_mark:管理端增加批量黑名单、白名单功能（2024.12.14已完成）
  20. :white_check_mark:Telegram Channel渠道上传文件记录机器人和频道数据，便于迁移和备份（2024.12.4已完成）
  21. :white_check_mark:支持自定义命名方式（仅原名 or 仅随机前缀 or 默认的随机前缀_原名）（2024.12.4已完成）
  22. :white_check_mark:支持上传失败自动切换其他渠道尝试（2024.12.12已完成）
  23. :hourglass_flowing_sand:后端list接口实现分页功能
  24. :white_check_mark:支持自定义链接前缀（2024.12.4已完成）
  25. :memo:对接alist，或实现webdav（评估中）
  26. :white_check_mark:文件详情增加文件大小记录（2024.12.10已完成）
  27. :hourglass_flowing_sand:支持管理员自定义全局默认链接前缀
  28. :white_check_mark:开放更多文件格式（2024.12.9已完成）
  29. :white_check_mark:进行删除、加入白名单、加入黑名单等操作时，自动清除CF CDN缓存，避免延迟生效（2024.12.11已完成）
  30. :white_check_mark:管理端批量选择时，记录用户选择的顺序（2024.12.20已完成）
  31. :memo:上传图片支持自定义上传路径，支持相册功能（评估中）
  32. :hourglass_flowing_sand:支持多个 Telegram Bot Token 负载均衡
</details>

5.2Fix Bugs👻

<details> <summary>Bug修复列表</summary>
  1. :white_check_mark:修复API上传无法直接展示在后台的问题（2024.7.25已修复）
  2. :white_check_mark:由于telegra.ph关闭上传，迁移至TG频道上传（2024.9.7已修复）
  3. :white_check_mark:修复未设管理员认证时管理端无限刷新的问题（2024.9.9已修复）
  4. :white_check_mark:修复部分视频无法预览播放的问题（经测试，暂定为文件自身存在问题，暂无法修复）
  5. :hourglass_flowing_sand:增加新的图片审查渠道
  6. :white_check_mark:R2渠道在管理端删除时，存储桶同步删除（2024.12.4已修复）
  7. :white_check_mark:读取文件响应头增加允许跨域头access-control-allow-origin: *（2024.12.9已修复）
  8. :white_check_mark:上传界面加入访问限制白名单（2024.12.11已修复）
</details>

6.Q&A

<details> <summary>常见问题解答</summary>

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

6.2如何通过PicGo上传？

6.3上传失败怎么办？

6.4TG_CHAT_ID前面有没有-

6.5进入后台页面加载不出记录或图片

6.6后台进行删除、拉黑等操作时不能立即生效

</details>

7.Tips

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

打赏：项目维护不易，喜欢本项目的话，可以作者大大一点小小的鼓励哦，您的每一份支持都是我前进的动力~

<img src="static/readme/award.png" alt="award" style="width:33%;display: inline-block" />

8.Star History

Star History Chart

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