Home

Awesome

CloudFlare-ImgBed

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

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

访问码:cfbed

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

相关优质博文(感谢每一位鼎力支持的热心大佬):

前端仓库MarSeventh/Sanyue-ImgHub

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

[!IMPORTANT]

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

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

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

1.Introduction

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

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

CloudFlare

2.Features

3.Deployment

3.1直接使用

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

版本更新方式,也请见3.1章最后一节

3.1.1提前准备

3.1.2手把手教程

3.1.2.1部署于Cloudflare

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

  1. Fork 本仓库

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

1

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

  2. 根据所需存储渠道进行相关设置:

    • Telegram 渠道:将3.1.1中获取的TG_BOT_TOKENTG_CHAT_ID分别添加到环境变量中,对应环境变量名为TG_BOT_TOKENTG_CHAT_ID

    • Cloudflare R2 渠道

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

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

  3. 绑定KV数据库

    • 创建一个新的KV数据库

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

  4. 重试部署,此时项目即可正常使用

3.1.2.2部署于服务器
  1. 安装服务器操作系统对应的node.js,经测试v22.5.1版本可以正常使用。(安装教程自行search)

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

  3. 在项目根目录下新建wrangler.toml配置文件,其内容为项目名称,环境变量(包括TG_BOT_TOKENTG_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

3.1.3后台管理认证

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

  1. 配置管理员认证

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

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

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

3.1.4图片审查

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

3.1.5Web和API上传认证

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

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

API格式:

接口名称/upload
接口功能上传图片或视频
请求方法POST
请求参数Query参数<br />authCode,string类型,即为你设置的认证码<br />serverCompress,boolean类型,表示是否开启服务端压缩(仅针对图片文件、Telegram上传渠道生效)<br />uploadChannel,string类型,取值为telegramcfr2,分别代表telegram bot渠道和Cloudflare R2渠道,默认为telegram bot渠道<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"
    }
]

3.1.6访问域名限制

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

3.1.7白名单模式

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

3.1.8页面自定义(DIY接口)

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

字段名用途类型内容规范
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"
}

3.1.9远端遥测

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

3.1.10随机图API

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

3.1.11注意!!!

修改环境变量方式

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

更新方式

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

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

3.2定制化修改

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

4.TODO

4.1Add Features💕

  1. 增加粘贴图片上传功能(2024.7.22已完成)
  2. 增加markdown、html等格式链接复制功能(2024.7.21已完成)
  3. 上传页面增加管理端入口(2024.7.21已完成)
  4. 增加用户个性化配置接口
    • 登录页面和上传页面背景图自定义(2024.8.25已完成)
    • 图床名称和Logo自定义(2024.8.26已完成)
    • 网站标题和Icon自定义(2024.8.26已完成)
    • 背景切换时间自定义(2024.9.11已完成)
    • 背景透明度支持自定义(2024.9.12已完成)
    • 页脚自定义传送门(2024.10.20已完成)
  5. 增加随机图API(2024.7.25已完成)
  6. 完善多格式链接展示形式,增加ubb格式链接支持(2024.8.21已完成)
  7. 完善登录逻辑,后端增加认证码校验接口(2024.8.21已完成)
  8. 支持URL粘贴上传(2024.8.23已完成)
  9. 支持大于5MB的图片上传前自动压缩(2024.8.26已完成)
  10. 上传页面右下角工具栏样式重构,支持上传页自定义压缩(上传前+存储端)(2024.9.28已完成)
  11. 重构管理端,认证+显示效果优化,增加图片详情页
  12. 管理端增加访问量统计,IP记录、IP黑名单、上传IP黑名单等
  13. 上传页面点击链接,自动复制到剪切板(2024.9.27已完成)
  14. 上传设置记忆(上传方式、链接格式等)(2024.9.27已完成,两种上传方式合并
  15. 若未设置密码,无需跳转进入登录页(2024.9.27已完成)
  16. 增加仅删除上传成功图片、上传失败图片重试(2024.9.28已完成)
  17. 优化粘贴上传时文件命名方法(2024.9.26已完成)
  18. 增加对R2 bucket的支持(2024.11.5已完成)
  19. 管理端增加批量黑名单、白名单功能
  20. Telegram Channel渠道上传文件记录机器人和频道数据,便于迁移和备份

4.2Fix Bugs👻

  1. 修复API上传无法直接展示在后台的问题(2024.7.25已修复)
  2. 由于telegra.ph关闭上传,迁移至TG频道上传(2024.9.7已修复)
  3. 修复未设管理员认证时管理端无限刷新的问题(2024.9.9已修复)
  4. 修复部分视频无法预览播放的问题(经测试,暂定为文件自身存在问题,暂无法修复)
  5. 增加新的图片审查渠道

5.Q&A

5.1未设置ALLOWED_DOMAINS,但无法跨域访问?

5.2如何通过PicGo上传?

5.3上传失败怎么办?

5.4TG_CHAT_ID前面有没有-

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

6.Tips

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

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

7.Star History

Star History Chart