注意!!!如果你之前部署过此项目,现在一定要更新一下最新版本
关于本项目
项目仓库(点击跳转) 前端仓库(点击跳转) 作者博客(点击跳转)本项目是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_TOKEN
和TG_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(如图)
保留好这两个值,后面会用到
cloudflare配置
并且有一个域名 不需要必须绑定在cf中 没有的话可以看下面两篇
2024可用的免费域名us.kg!审核极快,可托管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_ID | telegram频道ID | 必须 |
TG_BOT_TOKEN | telegram机器人token | 必须 |
BASIC_USER | 后台管理的账户名 | 推荐 |
BASIC_PASS | 后台管理的密码 | 推荐 |
AUTH_CODE | 前台的认证码 | 强烈推荐 防止他人滥用 |
ModerateContentApiKey | 图片审查api 怎么用后面会讲到 这里是填获取的api | |
ALLOWED_DOMAINS | 防盗链 访问域名限制 多个允许的域名用英文 , 分割,如:域名.com,域名2.top | 没必要 反正流量无限的速度也不受影响 还可能造成自己的不便 |
AllowRandom | 随机图api的前置 后面会讲到 |
下面是我的配置(值里面填你实际的)这张图是早期的 不需要配置tg 现在一定要部署TG的两个变量!!
(觉得比较敏感的可以点击右侧的加密 这里就单纯的是以后看不到值的内容了 没其他实际作用)
完成后点击保存 然后重新部署(所有关于环境变量和kv绑定的修改都要重新部署一遍)
选到“部署”一栏 在“所有部署”下面找到你最新的部署(就是最上面的那一个),鼠标点击在右侧三个点 在弹出的菜单中选择“重新部署”
等待部署完成后即可使用
内容审查api
最近不知道官网怎么了 没有注册入口了 直接进以前的注册入口moderatecontent.com/signin会报500错误,不知道是跑路了还是服务器崩了 最近暂时用不了 需要的还是设前台认证码吧
注册账号后获取到你的api 在环境变量中添加一条“ModerateContentApiKey” 值就是你获取的api
保存后别忘了重新部署一遍
随机图api
在设置好环境变量后访问https://your.domain/random
博主优秀哦~
哈哈哈 谢谢大佬🥰
写的太好了
谢谢谢谢哈哈哈哈哈哈
部署好之后能访问,但是上传失败,知道怎么解决吗
qq联系我
由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
出现问题,请先查看第5节常见问题Q&A部分。
这是原因 看本文最上面更新的
弄好了,忘记弄tg那一步了,你这教程好像没写tg_bot和chat_id这一步?
不用弄啊 环境变量吗 方便的话qq发截图给我 sqq号上面有
由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
出现问题,请先查看第5节常见问题Q&A部分。
这是原因 解决方法可以看本文最上面更新的 感谢支持!
这个一定要配置tg
是的
由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
出现问题,请先查看第5节常见问题Q&A部分。
这是原因 解决方法可以看本文最上面更新的 感谢支持!
按着作者的设置完环境变量,能访问到自己设置的站点,但是上传提示失败。。
统一回复一下 刚回家看到好几条关于tg环境变量的 可能是有变动了 我做的时候确实没有 有问题可以在这条下面留言 或者去GitHub提issues 我正在和作者联系 如果方便的话可以加我QQ(上面有)非常感谢
由于telegraph图床被滥用,该项目上传渠道已切换至Telegram Channel,请按照文档中的部署要求设置TG_BOT_TOKEN和TG_CHAT_ID,否则将无法正常使用上传功能。
此外,目前KV数据库为必须配置,如果以前未配置请按照文档说明配置。
出现问题,请先查看第5节常见问题Q&A部分。
这是原因 解决方法可以看本文最上面更新的 感谢支持!
TypeError: Cannot read properties of null (reading ‘file_id’) 大佬看看这是为啥
换个文件名试一下
如果你指的是之前的错误信息 “TypeError: Cannot read properties of null (reading ‘file_id’)”,那么这个错误信息的中文翻译是:TypeError: 无法读取 null 的属性(读取 ‘file_id’)。
这个错误的意思是你尝试读取一个 null 值的属性 file_id,但 null 没有这个属性,因此导致了错误。
换个文件名重新试一下 这种问题挺常见的 tg问题看上面的处理方式
其实不一定非要用github的,cloudflare pages支持上传本地文件进行部署,所以只需要把项目下载到本地,然后把压缩包传到cloudflare pages就行了(github下载的源码默认就是zip压缩包形式;cloudflare pages也正常传文件夹)
也可以 这样方便点 方便更新
不是使用的telegram的接口吗,为什么打开的图片地址是cloudflare pages的url呀
这是图片存储在telegram中 由cf提供界面(pages)和cdn服务
换句话说图片存在tg服务器中 这个项目部署在cf上可以和机器人对接进行存储和读取(当你上传照片时照片会由机器人发送到tg频道中)
感谢🙇
你好大佬我是小白, 按照你的教程部署成功了,我想了解一下原理,图片上传到了电报服务器,然后通过CF来访问,CF里面的KV储存是用来干嘛的呀
这是图片存储在telegram中 由cf提供界面(pages)和cdn服务
换句话说图片存在tg服务器中 这个项目部署在cf上可以和机器人对接进行存储和读取(当你上传照片时照片会由机器人发送到tg频道中)
kv是用来关联图片和链接的