969 字
5 分钟

CloudFlare-ImgBed + Telegram 图床 + PicGo + Obsidian 自动上传全流程教程

AI 摘要

一套真正适合 Markdown 写作者、Obsidian 用户、博客作者的自动化图床方案。


前言#

以前写博客时,我经常会遇到这些问题:

  • 本地 Markdown 图片路径混乱
  • 换电脑后图片丢失
  • 博客迁移时图片全部失效
  • Typora / Obsidian / VSCode 各种编辑器图床不统一
  • Git 仓库越来越大

后来我开始折腾:

  • Cloudflare
  • Telegram
  • PicGo
  • Obsidian

最终整理出了现在这套方案:

Obsidian
Image Auto Upload
PicGo
CloudFlare-ImgBed
Telegram

效果就是:

✅ 在 Obsidian 中直接粘贴图片
✅ 自动上传图床
✅ 自动替换 Markdown 图片链接
✅ Telegram 作为底层存储
✅ Cloudflare 提供 CDN 与访问加速

整个过程几乎完全自动化。


整体架构#

flowchart LR A[Obsidian 写文章] --> B[Image Auto Upload] B --> C[PicGo Server] C --> D[CloudFlare-ImgBed] D --> E[Telegram 存储] E --> F[返回图片 URL] F --> G[自动写回 Markdown]

一、部署 CloudFlare-ImgBed#

项目地址:

部署方式推荐:

  • Cloudflare Pages

1. Fork 仓库#

先 Fork 官方仓库到自己的 GitHub。


2. 创建 Cloudflare Pages#

进入:

Cloudflare Dashboard
→ Workers & Pages
→ Create Application
→ Pages
→ Connect to Git

选择你 Fork 的仓库。


3. 构建设置(非常重要)#

保持默认即可:

配置项内容
Framework presetNone
Build command留空
Build output directory留空

⚠️ 不要填写:

dist
build
out

否则 Functions 不会部署成功。


二、配置 Telegram 存储#

CloudFlare-ImgBed 最新版默认支持 Telegram 作为上传通道。

1. 创建 Telegram Bot#

打开:

  • @BotFather

发送:

/newbot

创建完成后获取:

TG_BOT_TOKEN

2. 获取 Chat ID#

方法:

把 Bot 拉进频道或群组。

然后访问:

https://api.telegram.org/bot你的BOT_TOKEN/getUpdates

找到:

"chat": {
"id": xxxxxxxxx
}

这个就是:

TG_CHAT_ID

三、配置 Cloudflare 环境变量#

进入:

Cloudflare Pages
→ Settings
→ Environment Variables

添加:

KeyValue
TG_BOT_TOKENTelegram Bot Token
TG_CHAT_IDTelegram Chat ID
AUTH_CODE你自己的上传密码

例如:

AUTH_CODE=123456

保存后重新部署。


四、测试上传接口#

部署完成后访问:

https://你的域名/upload

如果出现:

Unauthorized

说明:

✅ 上传接口正常
✅ 认证生效
✅ 可以开始接入 PicGo


五、安装与配置 PicGo#

PicGo:

1. 安装 picgo-plugin-cfbed-uploader 插件#

打开:

PicGo
→ 插件设置

搜索:(搜不到就去github下载导入)

picgo-plugin-cfbed-uploader

安装:

picgo-plugin-cfbed-uploader

安装完成后重启 PicGo。


六、PicGo 图床配置#

进入:

PicGo
→ 图床设置
→ picgo-plugin-cfbed-uploader

填写:

图床配置名#

随意

站点地址#

https://你的域名/upload

API令牌#

图床后台安全设置里添加

上传渠道#

自己的渠道

命名方式#

按自己的需求

返回格式#

默认

七、测试 PicGo 是否成功#

拖一张图片进入 PicGo。

如果成功:

PicGo 会自动复制图片链接。

例如:

https://你的域名/file/xxxxx.webp

八、Obsidian 自动上传配置#

插件:

Image Auto Upload

安装方式#

设置
→ 社区插件
→ 搜索 Image Auto Upload

安装并启用。


九、开启 PicGo Server#

进入:

PicGo
→ 设置
→ Server

开启:

Enable PicGo Server

记住端口。

例如:

36677

十、配置 Obsidian 插件#

进入:

Image Auto Upload 设置

填写:

http://127.0.0.1:36677/upload

十一、最终效果#

现在:

  1. 在 Obsidian 粘贴图片
  2. 自动触发上传
  3. PicGo 调用图床接口
  4. CloudFlare-ImgBed 存入 Telegram
  5. 返回 CDN 外链
  6. 自动替换 Markdown 图片

最终 Markdown:

![](https://你的域名/file/xxxxx.webp)

十二、推荐开启的功能#

CloudFlare-ImgBed#

建议开启:

  • WebP 转换
  • 自动压缩
  • 随机文件名

Obsidian#

建议配合:

  • Git 插件
  • Excalidraw
  • Dataview

一起使用。


十三、常见问题#

1. /upload 显示 404#

说明:

  • Functions 没部署成功
  • Build output 配错

重新部署即可。


2. 上传提示 Unauthorized#

说明:

  • authCode 不匹配
  • PicGo Header 配置错误

3. Obsidian 不自动上传#

检查:

  • PicGo Server 是否开启
  • 端口是否正确
  • 防火墙是否拦截

十四、总结#

这套方案最大的优点:

  • 完全 Markdown 化
  • 低成本
  • 可迁移
  • 自动化程度高
  • 不依赖第三方图床

非常适合:

  • 博客作者
  • Obsidian 用户
  • 技术写作者
  • 长期知识管理

尤其是:

Obsidian + PicGo + Cloudflare

这一套组合,真的非常舒服。


支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
CloudFlare-ImgBed + Telegram 图床 + PicGo + Obsidian 自动上传全流程教程
https://blog.tsh520.cn/posts/技术分享/正式版-cloudflare-imgbed-博客教程/
作者
团子和蛋糕
发布于
2026-05-12
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image
团子和蛋糕
海棠花未眠,老陈总在我身边
文章
36
标签
36
动态
31
前往小窝~
我和宝宝在一起已经
---------TSH ❤️ CXY---------
---------TSH
❤️
CXY---------
0 0 0 0 0
00 "
最近更新
公告
如果你喜欢,那么欢迎来到我的世界!
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
36
动态
31
影视
41
书籍
9
游戏
2
音乐
2
分类
8
标签
36
总字数
67,799
运行时长
0
最后活动
0 天前

目录