CattoPic - 基于 Cloudflare 的自建图床
图床是内容创作者绑不开的话题。第三方服务或有审查顾虑,或有跑路风险,或受制于访问速度。自建图床虽然门槛稍高,却能在数据主权和使用体验之间找到平衡。CattoPic 是一个构建在 Cloudflare 生态上的图床方案,值得一试。相比之前的ImageFlow有什么好处呢?答案是扩展性更好吧,虽然没有了服务器做后端压缩,好在能利于整个cloudflare的生态。
Serverless版本项目地址:
Go 版本项目地址:
CattoPic 是什么
CattoPic 是一个自托管的图片托管服务,提供图片上传、管理和对外服务的完整功能。它的特点在于完全依托 Cloudflare 的免费服务构建后端,前端则可部署在 Vercel。

NOTE本项目后端需要使用worker的计费计划Queues模块,请提前了解相关计费规则。
核心功能包括:
- 多格式图片上传,支持 JPEG、PNG、GIF、WebP、AVIF
- 上传后自动转换为 WebP 和 AVIF 格式,节省存储和带宽
- 标签系统,便于图片分类管理
- 图片过期时间设置,支持临时图片
- 公开的随机图片 API,可用于博客背景或其他场景
- 横竖屏自动识别,API 可按方向筛选
技术架构
CattoPic 的技术选型颇为现代:
前端
- Next.js 16 配合 React 19
- Tailwind CSS 处理样式
后端
- Cloudflare Workers 作为计算层,使用 Hono 框架构建 API
- Cloudflare D1 作为数据库,存储图片元数据和配置
- Cloudflare R2 作为对象存储,存放图片文件
- Cloudflare KV 用于缓存
- Cloudflare Queues 处理异步任务(需付费才能使用)
- Cron Triggers 定时清理过期图片
整套后端服务运行在 Cloudflare 的边缘网络上,响应速度和稳定性都有保障。
部署指南
部署 CattoPic 需要两个步骤:配置 Cloudflare 后端服务,以及部署前端应用。
前置准备
- 一个 Cloudflare 账号
- 一个 Vercel 账号(用于前端部署)
- 本地安装 Node.js 和 pnpm
- 安装 Wrangler CLI:
pnpm add -g wrangler
后端部署
首先登录 Wrangler:
wrangler login创建所需的 Cloudflare 资源:
# 创建 R2 存储桶wrangler r2 bucket create cattopic-r2 --location=apac
# 创建 D1 数据库wrangler d1 create CattoPic-D1 --location=apac
# 创建 KV 命名空间wrangler kv namespace create CACHE_KV
# 创建消息队列wrangler queues create cattopic-delete-queue记录上述命令返回的 ID,更新 worker/wrangler.toml 配置文件:
name = 'cattopic-worker'main = 'src/index.ts'compatibility_date = '2025-12-10'compatibility_flags = ['nodejs_compat']
[vars]ENVIRONMENT = 'production'R2_PUBLIC_URL = 'https://your-r2-domain.com' # 你的 R2 公开访问域名
[images]binding = "IMAGES"
[[r2_buckets]]binding = 'R2_BUCKET'bucket_name = 'cattopic-r2' # 你创建的 R2 bucket 名称
[[d1_databases]]binding = 'DB'database_name = 'CattoPic-D1'database_id = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' # 替换为你的 D1 database_id
[[kv_namespaces]]binding = "CACHE_KV"id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" # 替换为你的 KV namespace id
[[queues.producers]]queue = "cattopic-delete-queue"binding = "DELETE_QUEUE"
[[queues.consumers]]queue = "cattopic-delete-queue"max_batch_size = 10max_batch_timeout = 5
[triggers]crons = ['0 * * * *'] # 每小时清理过期图片初始化数据库:
cd workerwrangler d1 execute CattoPic-D1 --remote --file=schema.sql部署 Worker:
wrangler deploy部署完成后会得到一个 Worker URL,形如 https://cattopic-worker.your-account.workers.dev。
创建 API 密钥
通过 D1 控制台或 Wrangler 执行 SQL 创建 API 密钥:
pnpm wrangler d1 execute CattoPic-D1 --remote --command "INSERT INTO api_keys (key, created_at) VALUES ('your-api-key-here', datetime('now'));"前端部署
Fork 项目仓库到你的 GitHub 账号,在 Vercel 中导入该项目。
配置环境变量:
NEXT_PUBLIC_API_URL=你的Worker地址NEXT_PUBLIC_REMOTE_PATTERNS=你的R2公开访问域名,你的Worker地址部署完成后访问前端地址,使用 API 密钥登录即可开始使用。
更详细的文档见项目readme。
项目预览







R2 公开访问配置
R2 存储桶需要配置公开访问才能让图片被外部访问。在 Cloudflare 控制台进入 R2 设置,绑定自定义域名或启用公开访问,记录得到的公开 URL。
主要优势
成本优势
Cloudflare 的免费额度相当慷慨:
- Workers:每天 10 万次请求
- D1:5GB 存储,500 万行读取
- R2:10GB 存储,100 万次 A 类操作,1000 万次 B 类操作
- KV:每天 10 万次读取
对于个人博客或中小站点,这些额度足够日常使用。
性能优势
借助 Cloudflare 的全球边缘网络,图片访问延迟低。自动格式转换功能会生成 WebP 和 AVIF 版本,现代浏览器可获得更小的文件体积和更快的加载速度。
数据自主
图片存储在你自己的 R2 存储桶中,数据完全由你掌控。不必担心第三方服务商的内容审查或服务终止。
功能完备
管理后台支持拖拽上传、粘贴上传、批量操作。标签系统和过期时间功能让图片管理更加灵活。随机图片 API 是一个实用的附加功能。
当前限制
CattoPic 目前存在一些使用限制,在部署前需要了解:
文件大小限制
前端上传组件限制单个文件不超过 20MB。我在后端写死了这一数值,因为cloudflare无法处理10mb以上的图片转换,同时过大的图片也会导致超时。后续可能考虑看看有没有其他方案改进。我也会时刻关注worker的更新进度。
GIF 处理
GIF 文件会保留原格式存储,不会转换为 WebP 或 AVIF。这是考虑到动态图片转换的复杂性做出的选择。
总结
CattoPic 提供了一个基于 Cloudflare 生态的图床方案。它利用 Cloudflare 的免费服务层构建了一套功能完整的图片托管系统,适合对数据主权有要求、希望控制成本的用户。部署过程需要一定的技术基础,但文档较为完善。20MB 的上传限制对于网页图片来说通常够用,如有需要也可以通过修改代码调整。
如果你正在寻找一个可控、低成本、性能不错的图床方案,CattoPic 值得考虑。