完全免费,图文教程手把手教你使用cloudflare搭建一个无限空间的私人图床 支持身份认证与成人元素鉴定!
本文最后更新于4 天前,其中的信息可能已经过时,如有错误请发送邮件到admin@yunsen2025.top

注意!!!如果你之前部署过此项目,现在一定要更新一下最新版本

关于本项目

项目仓库(点击跳转)

前端仓库(点击跳转)

作者博客(点击跳转)

本项目是Telegraph-Image的重制版

这个项目为你提供了一个不限容量不限数量的图床+cdn服务

图片存储在telegraph的服务器上 由cloudflare提供全球cdn服务

基于cloudflare pages 完全免费(现在page不限制额度了 和worker分开了)

支持图片审查 API,可自动屏蔽不良图片

可以自定义域名(也可以使用cf分配的*.page.dev 但好像墙了 可以用其他dns的域名)获取域名可以看

该项目在原项目的基础上加以完善 特色功能如下

前后端全部开源 整体部署简单;

添加了身份认证(解决了原项目的一个大问题,防止滥用);

突破5mb的上传限制(超过了会自动压缩);

流畅丝滑的过渡动画;

多种上传方式(拖拽,选择文件,粘贴等);

多样化复制方式(可直接复制html,BBCode,MarkDown语句);

可以自定义页面,网站名称与logo,满足更多自定义需求;

增加了随机图api;

更多的欢迎大家自行探索

界面图

图床速度体验(点击跳转)

开始之前,要先理解两个概念:

1.telegram 著名的通讯软件

2.telegraph 由telegram推出的匿名图片托管平台(现在不匿名了)

实操部署

部署此项目首先需要拥有一个GitHub账号(点击跳转)和一个cloudflare账号(点击跳转)以及Telegram账号

Telegram配置

自9.8起 由于telegraph图床被滥用 该项目上传渠道已切换至Telegram Channel

这里需要获取到TG_BOT_TOKENTG_CHAT_ID这两个值 后续有用(必须的!!)

首先需要一个telegram账号 软件直接去Google Play或者官网(t.me)下载即可

我用的177电信卡+86能正常收到验证码

注册telegram后 可以安装这个简体中文包点此安装官方简体中文语言包(这是官方的 绝对安全)

这边我用电脑版做演示 手机版一样的

获取TG_BOT_TOKEN

在搜索框中搜索“@BotFather”注意前面有个机器人的标志和后面的认证 千万别点错了!!!

第一次使用点开对话后点击“开始

按图中进行配置

获取TG_CHAT_ID(频道ID)

在telegram中 打开左侧的二级菜单(三道杠) 打开新建频道(Manage Channel)

频道的名字随便起 后面都跳过就行

完成创建后 找到“管理频道

在菜单中找到“管理员(Administrators)

菜单中点击“添加管理员

将刚才创建的机器人也设为管理员(注意搜索时要@刚才设置的用户名 别填加错了)

权限默认的就可以

完成后首页搜索“@VersaToolsBot

回复/start 然后再你刚才创建的频道里随便发一条消息 并将消息转发到@VersaToolsBot(如图)

在频道中发送的
刚才发的消息转发到@VersaToolsBot

保留好这两个值,后面会用到

cloudflare配置

并且有一个域名 不需要必须绑定在cf中 没有的话可以看下面两篇

2024可用的免费域名us.kg!审核极快,可托管cloudflare 手把手带你避开所有坑点! – yunsen2025的小窝

2024可用超低价顶级域名!可支付宝,绑定cloudflare 第二年续费同价! – yunsen2025的小窝

首先打开该项目仓库(点击跳转)点击“Fork”(如果你认可此项目 可以点击旁边的starts以支持作者)

此页面不用动任何设置 直接点击“Create fork”即可

成功创建fork后来到cloudflare 登录你的账号并打开仪表盘 点击侧边栏中的“Workers和Pages

点击上方的“创建

选到“Pages”一栏,点击“连接到Git

在打开的第一个页面 点击“连接到GitHub”随后会跳转到GitHub进行授权 选到“All repositories”(该选项是默认的 啥也不用动就好)

完成授权后会回到cf的选择存储库的界面(如下图),选择刚才fork的仓库后点击“开始设置

下一个界面啥也不用动,直接划到下面点击“保存并部署即可

出现下图即部署完成,点击“继续处理项目

到此,最基本的已经部署好了,下面是设置认证码与后台管理的账号密码

点击“自定义域”添加一个你自己的域名(域名不是必须在cf中 在其他的dns中也行 但是还要额外配置比较麻烦)

点击左侧栏中的“KV”(在Workers和Pages菜单下)

点击“创建命名空间

名称为“img_url” 点击“添加

完成添加后 回到page的界面 点击“设置” 后点击“变量与机密

找到“绑定”一栏 点击“添加” 在弹出的页面中找到“KV 命名空间

变量名称”填写“img_url

KV命名空间“选择刚才创建的KV “img_url” 完成后点击保存

在绑定的上面找到“变量与机密”一栏 点击右侧的“添加

添加“环境变量

在这里有些常用环境变量可以添加 如下表

变量名称作用是否推荐
TG_CHAT_IDtelegram频道ID必须
TG_BOT_TOKENtelegram机器人token必须
BASIC_USER后台管理的账户名推荐
BASIC_PASS后台管理的密码推荐
AUTH_CODE前台的认证码强烈推荐 防止他人滥用
ModerateContentApiKey图片审查api 怎么用后面会讲到 这里是填获取的api
ALLOWED_DOMAINS防盗链 访问域名限制
多个允许的域名用英文,分割,如:域名.com,域名2.top
没必要 反正流量无限的速度也不受影响 还可能造成自己的不便
AllowRandom随机图api的前置 后面会讲到
(还有关于界面自定义的变量 可以去GitHub看 个人不推荐界面大改 一是麻烦 二是还要动前端)

下面是我的配置(值里面填你实际的)这张图是早期的 不需要配置tg 现在一定要部署TG的两个变量!!

(觉得比较敏感的可以点击右侧的加密 这里就单纯的是以后看不到值的内容了 没其他实际作用)

完成后点击保存 然后重新部署(所有关于环境变量和kv绑定的修改都要重新部署一遍)

选到“部署”一栏 在“所有部署”下面找到你最新的部署(就是最上面的那一个),鼠标点击在右侧三个点 在弹出的菜单中选择“重新部署

等待部署完成后即可使用

内容审查api

最近不知道官网怎么了 没有注册入口了 直接进以前的注册入口moderatecontent.com/signin会报500错误,不知道是跑路了还是服务器崩了 最近暂时用不了 需要的还是设前台认证码吧

打开moderatecontent官网(点击跳转)

注册账号后获取到你的api 在环境变量中添加一条“ModerateContentApiKey” 值就是你获取的api

保存后别忘了重新部署一遍

随机图api

在设置好环境变量后访问https://your.domain/random

如果您觉得本文对您有帮助,可以支持下博主进行创作(一分也是爱啊啊啊啊啊啊)
博主QQ:3784773930(点击跳转qq添加)
本站默认解压密码:yunsen2025.top(特别标注除外)

评论

  1. 叁月柒
    Android Chrome
    1 月前
    2024-8-28 23:41:52

    博主优秀哦~

    来自陕西
    • Avatar photo
      博主
      叁月柒
      Windows Edge
      1 月前
      2024-8-29 15:53:08

      哈哈哈 谢谢大佬🥰

      来自河北
      • kang
        HEISEN黑森
        Macintosh Chrome
        1 月前
        2024-9-01 16:29:26

        写的太好了

        来自湖南
        • Avatar photo
          博主
          kang
          Linux Edge
          1 月前
          2024-9-01 16:48:11

          谢谢谢谢哈哈哈哈哈哈

          来自河北
  2. twf
    Windows Edge
    4 周前
    2024-9-10 10:27:23

    部署好之后能访问,但是上传失败,知道怎么解决吗

    来自广东
    • Avatar photo
      博主
      twf
      Android Chrome
      4 周前
      2024-9-11 21:42:47

      qq联系我

      来自河北
    • Avatar photo
      博主
      twf
      Android Chrome
      4 周前
      2024-9-11 22:07:30

      由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
      此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
      出现问题,请先查看第5节常见问题Q&A部分。
      这是原因 看本文最上面更新的

      来自河北
  3. twf
    Windows Edge
    4 周前
    2024-9-10 11:20:12

    弄好了,忘记弄tg那一步了,你这教程好像没写tg_bot和chat_id这一步?

    来自广东
    • Avatar photo
      博主
      twf
      Android Chrome
      4 周前
      2024-9-11 21:44:52

      不用弄啊 环境变量吗 方便的话qq发截图给我 sqq号上面有

      来自河北
    • Avatar photo
      博主
      twf
      Android Chrome
      4 周前
      2024-9-11 22:08:16

      由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
      此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
      出现问题,请先查看第5节常见问题Q&A部分。
      这是原因 解决方法可以看本文最上面更新的 感谢支持!

      来自河北
  4. csp
    Windows Chrome
    4 周前
    2024-9-10 20:16:53

    这个一定要配置tg

    来自广东
    • Avatar photo
      博主
      csp
      Linux Edge
      4 周前
      2024-9-11 22:11:02

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

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

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

      这是原因 解决方法可以看本文最上面更新的 感谢支持!

      来自河北
  5. liu
    置顶
    Windows Chrome
    4 周前
    2024-9-10 21:43:24

    按着作者的设置完环境变量,能访问到自己设置的站点,但是上传提示失败。。

    来自湖南
    • Avatar photo
      博主
      liu
      Android Chrome
      4 周前
      2024-9-11 21:49:33

      统一回复一下 刚回家看到好几条关于tg环境变量的 可能是有变动了 我做的时候确实没有 有问题可以在这条下面留言 或者去GitHub提issues 我正在和作者联系 如果方便的话可以加我QQ(上面有)非常感谢

      来自河北
    • Avatar photo
      博主
      liu
      Android Chrome
      4 周前
      2024-9-11 22:08:31

      由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
      此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
      出现问题,请先查看第5节常见问题Q&A部分。
      这是原因 解决方法可以看本文最上面更新的 感谢支持!

      来自河北
  6. Lxg-021002
    Windows Chrome
    4 周前
    2024-9-11 15:15:21

    TypeError: Cannot read properties of null (reading ‘file_id’) 大佬看看这是为啥

    来自重庆
    • Avatar photo
      博主
      Lxg-021002
      Linux Edge
      4 周前
      2024-9-11 22:14:25

      换个文件名试一下

      来自河北
    • Avatar photo
      博主
      Lxg-021002
      Linux Edge
      4 周前
      2024-9-11 22:19:02

      如果你指的是之前的错误信息 “TypeError: Cannot read properties of null (reading ‘file_id’)”,那么这个错误信息的中文翻译是:TypeError: 无法读取 null 的属性(读取 ‘file_id’)。
      这个错误的意思是你尝试读取一个 null 值的属性 file_id,但 null 没有这个属性,因此导致了错误。
      换个文件名重新试一下 这种问题挺常见的 tg问题看上面的处理方式

      来自河北
  7. bian
    Android Chrome
    3 周前
    2024-9-16 20:32:43

    其实不一定非要用github的,cloudflare pages支持上传本地文件进行部署,所以只需要把项目下载到本地,然后把压缩包传到cloudflare pages就行了(github下载的源码默认就是zip压缩包形式;cloudflare pages也正常传文件夹)

    来自CLOUDFLARE.COM
    • Avatar photo
      博主
      bian
      Windows Edge
      3 周前
      2024-9-16 22:18:33

      也可以 这样方便点 方便更新

      来自河北
  8. sakura
    Windows Chrome
    3 周前
    2024-9-21 20:34:34

    不是使用的telegram的接口吗,为什么打开的图片地址是cloudflare pages的url呀

    来自广西
    • Avatar photo
      博主
      sakura
      Windows Edge
      3 周前
      2024-9-21 21:22:17

      这是图片存储在telegram中 由cf提供界面(pages)和cdn服务
      换句话说图片存在tg服务器中 这个项目部署在cf上可以和机器人对接进行存储和读取(当你上传照片时照片会由机器人发送到tg频道中)

      来自河北
      • sakura
        HEISEN黑森
        Windows Chrome
        3 周前
        2024-9-21 21:22:55

        感谢🙇‍

        来自广西
  9. run
    Windows Chrome
    2 周前
    2024-9-23 9:30:19

    你好大佬我是小白, 按照你的教程部署成功了,我想了解一下原理,图片上传到了电报服务器,然后通过CF来访问,CF里面的KV储存是用来干嘛的呀

    来自CLOUDFLARE.COM
    • Avatar photo
      博主
      run
      Android Chrome
      2 周前
      2024-9-26 23:46:19

      这是图片存储在telegram中 由cf提供界面(pages)和cdn服务
      换句话说图片存在tg服务器中 这个项目部署在cf上可以和机器人对接进行存储和读取(当你上传照片时照片会由机器人发送到tg频道中)
      kv是用来关联图片和链接的

      来自河北

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇