OneImg在线图床

OneImg在线图床

版权

创建于2026年7月19日，更新于2026年7月20日。

来自@Cusor哈哈哈。

也参考w3c大佬提供的架构思想。

也来自rz群里一批小伙伴对博客的折腾氛围。

最终效果

eo版在线web图床，无服务器，nice。

拥有它，你就可以随时随地上传图片到自己图床啦哈哈哈，你也是拥有自己图床的道友了。😊😊😊

按我的手把手文档来做，你将快速拥有一个和我一样丝滑的在线图床哦。😊😊😊

https://oneimgadmin.onedayxyy.cn/

初始需求

1. 我可以通过密码登录这个oneimgadmin.onedayxyy.cn域名后台，然后上传图片
2. 图片可以默认转成avif/webp等格式
3. 图床支持各种图片的预览
4. 图床可以备份数据到其他对象存储或者git仓库（扩展功能）

写在前面

有任何不懂问题，先多看几次手把手文档，自己是否哪里配置有遗漏或配置错了，还有不明白，可以随时群里找我解答哈😊。

必备条件

• 拥有一个属于你自己的备案域名
• 具有cnb账号 （01.可以跑cnb ci流水线，非常香； 02.早注册早享受）
• 具备eo账号 （01.默认已经开启Makers服务了；）
• 具有七牛云账号 （免费10g标准存储空间/每月，免费10g CDN 回源流出流量/每月 ⚠️完全够用了，且很稳定）
• 对拥有一个自己独立站点特别感兴趣的道友

仓库地址

https://cnb.cool/onedayxyy/oneimgpublic

方案架构

 1浏览器 ──► 你的后台域名 (EdgeOne + Functions + ADMIN_KV)
 2                │
 3                └─ 上传 / 列举 / 删除 ──► 七牛 Kodo
 4读图 ◄── 你的图床域名 (CDN) ◄──────────┘
 5
 6
 7### 架构与部署
 8- EdgeOne Pages 管理后台 + 七牛 Kodo 存图，无自建服务器/数据库
 9- EdgeOne KV（`ADMIN_KV`）存鉴权与图库索引
10- CNB 推送自动部署；登录页/后台可显示版本号

功能概览

• 密码登录（JWT + HttpOnly Cookie，失败限流）
• 拖拽 / 多选上传 → pfop 转 AVIF（可选 WebP）
• 图库预览、复制链接、删除；按时间 / 大小 / 类型排序
• 信息汇总（总数、体积、今日/昨日/周/月/年，北京时间）
• 兼容 PicList 等到同一桶 images/ 前缀的对象
• 图片格式重命名为image-20260719180043.avif类型
• 可选：第二桶或 Git 元数据备份（扩展）

详细功能：

 1当前 `D:\oneimg` 在线图床具备的功能如下（按实际代码与 README 整理）：
 2
 3### 安全与登录
 4- 密码登录（JWT + HttpOnly Cookie）
 5- 登录失败限流 / 锁定倒计时
 6- 退出登录；已登录访问 `/` 自动跳转图库
 7- 登录页壁纸轮播 + 版本号展示
 8
 9### 上传与转码
10- 拖拽 / 多选上传
11- 默认转 AVIF（路径形如 `images/image-时间戳.avif`）
12- 可选同时产出 WebP
13- 可限制最长边（`CONVERT_MAX_EDGE`，默认 2560）
14- 原图可保留在 `images/_raw/`（`KEEP_RAW`）
15- GIF 可保留原格式
16- 转码失败可重试；支持预览代理（防防盗链裂图）
17
18### 图库管理
19- 缩略图网格（5×5，每页 25）+ 页码分页
20- 灯箱大图预览
21- 卡片显示文件大小、上传日期（北京时间）
22- **默认复制 Markdown**（`![alt](url)`）；上传成功有成功 Toast
23- 删除（另有批量删除 API）
24- 搜索文件名 / URL
25- 排序：时间 / 大小 / 类型
26- 状态筛选：就绪 / 转码中 / 失败
27- 「刷新」同步七牛 `images/` 索引（含 PicList 直传）
28
29### 信息汇总
30- 总张数、总体积
31- 今日 / 昨日 / 本周 / 本月 / 本年上传量（北京时间）
32
33### 第三方与备份
34- 兼容 PicList 等同桶 `images/` 直传
35- 可选备份到第二七牛桶
36- 可选把图库元数据备份到 Git（CNB/GitHub 等）
37
38### 运维辅助
39- `/api/health`、`/api/version`、`/api/setup/status` 配置自检
40- 七牛连通性测试接口
41- 列表索引 KV 缓存（约 10 分钟），减轻全量列举
42
43一句话：**密码后台管图 + 七牛存 AVIF 公网链 + PicList 兼容 + 统计/排序/搜索/备份**。

本次规划

图床域名: oneimg.onedayxyy.cn

图床管理后台域名: oneimgadmin.onedayxyy.cn

cnb仓库名称：oneimg

部署步骤

前置条件

（以下步骤必须手把手文档⚠️⚠️⚠️）

（1）创建七牛云存储桶、获取七牛云ket/secret、七牛云配置域名

来到七牛云个人控制台对象存储下：

（1）创建七牛云存储桶

点击新建空间：

存储空间名称，这里填写oneeoimg,

存储区域，这里选择华东-浙江，

访问控制，这里选择公开，

选择完成后，点击确认：

然后就创建好七牛云oneeoimg存储桶了：

接下来，我们配置下域名解析：

进到oneeoimg存储桶，来到域名管理-自定义源站域名:

我们给七牛云oneeoimg存储桶绑定一个域名：oneimgqny.onedayxyy.cn

记得在自己dns域名解析上那里做好dns域名解析：（做好cname域名解析）

特别注意：这里不需要开启https！！！⚠️⚠️⚠️

（2）：获取七牛云ket/secret

点击七牛云头像-秘钥管理-新增，

新增秘钥后，我们记录记录好七牛云的AK和SK：

（2）eo配置域名

（1）配置图床域名

⚠️注意配置图床域名的回源地址；

来到eo域名管理这里，做好对图床服务域名的一个配置过程：

记得在域名解析商那里做好域名解析：

记得配置好免费的https证书：

（2）配置图床管理后台域名

这个只需要在Makers-oneimg项目-域名管理这里添加域名就好：

记得在域名解析商那里做好域名解析：

记得配置好免费的https证书：

（3）创建并获取cnb api token，并创建secret仓库

（1）创建并获取cnb api token（这里主要要由充足的权限⚠️）

来到自己cnb仓库，点击头像-个人设置-访问令牌-添加访问令牌：

命名为one-cnb-api-root-privliges，

到期时间：永久有限，

资源范围:全部，

常用场景：勾选全部，

授权范围：凡是有读写的，都修改为读写。（这里我们一次性给于最大权限哦哈哈）

完成后，点击创建：

点击创建后，就会弹出新生成的cnb api token：

我们切记保存好这个秘钥：

1one-cnb-api-root-privliges
2令牌名:one-cnb-api-root-privliges
3Git Username:cnb
4Token:fxxxxxxxxxxxxxxxxxxxxxxxxxEPD  #这里已脱敏

（2）创建cnb secret仓库

https://cnb.cool/onedayxyy/secret

在secret仓库里创建envs.yml文件，然后写入自己要用的秘钥变量名称及数值即可：

1#七牛云（这里用自己前面获取到的信息填写即可）
2QINIU_AK: 1Exxxxxxxxxxxxxxxxxxxxxxxx_B
3QINIU_SK: lxxxxxxxxxxxxxxxxxxxxxxsM4
4QINIU_BUCKET: onedayxyyrzdist    
5
6
7#cnb token（这里用自己前面获取到的信息填写即可）
8GIT_cnb_USERNAME: cnb
9GIT_cnb_ACCESS_TOKEN: 4xxxxxxxxxxxxxxxxxxxxxxxC

填写完成后提交，我们后续的cnb ci里会用到的。

1.克隆cnb仓库

克隆cnb仓库（克隆，然后推送后，会直接触发cnb构建，然后在makers上就会创建相应的项目了）

1(1)在自己cnb仓库提前创建好一个空仓库（命名随意）本次就叫做 oneimg
2
3
4(2)在自己电脑上克隆好仓库,并推送
5cd /d/
6git clone https://cnb.cool/onedayxyy/oneimgpublic

2.创建kv命名空间及KV变量、并与Makers项目做好绑定

（1）创建KV命名空间

来到Makers-存储-kv存储，点击创建命名空间,

本次我这里创建一个叫oneimg的命名空间：

然后需要创建如下一些变量，并自定好对应的值：⚠️⚠️⚠️(这里需要注意，不要出错)

 1# 后台登录密码
 2ADMIN_PASSWORD=change_me
 3
 4# JWT 签名密钥（建议: openssl rand -base64 32）
 5JWT_SECRET=change_me_to_a_long_random_string
 6
 7# 七牛云 Kodo
 8QINIU_AK=your_qiniu_access_key
 9QINIU_SK=your_qiniu_secret_key
10QINIU_BUCKET=your-bucket-name
11
12# 图床公网访问域名（绑定在七牛或 CDN 上的域名，不要填未对外的源站域名）
13QINIU_DOMAIN=img.example.com
14QINIU_REGION=z0

（2）与Makers项目做好绑定

来到刚才自动创建好的oneimgmakers项目里：

来到KV存储，点击绑定命名空间：

这里新建的变量名称一定要是ADMIN_KV，然后绑定我们前面创建的oneimg命名空间

3.验证

推送本地仓库，触发ci流水线，待ci结束后，登录图床后台，验证服务：

 1cd /d/oneimgpublic
 2
 3rm -rf .git ##记得先删除之前的.git
 4
 5git init .
 6git remote add origin https://cnb.cool/onedayxyy/oneimg
 7git add -A
 8git commit -m"first commit"
 9git push --set-upstream origin master
10# git push

https://oneimgadmin.onedayxyy.cn/

FAQ

问题：cnb仓库 vs github仓库 一键部署

问题：还是存在一个问题

通过github上一键部署图标，虽然后直接在cnb makers上创建对应的服务及KV变量，但是图床仓库代码还是在github，很不友好；

通过cnb直接克隆开源在线图床后，可以直接触发cnb ci流水线，也可以自动在cnb makers上创建对应的服务，但是需要我们手动创建对应的KV命名空间，然后在命名空间里创建对应的kv变量，然后把KV命名空间绑定到此项目上；（这个还是体验更好一些）。

关于我

我的博客主旨：

• 排版美观，语言精炼；
• 文档即手册，步骤明细，拒绝埋坑，提供源码；
• 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站：https://onedayxyy.cn/

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

🍀 微信公众号

《云原生架构师实战》

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

🍀 知乎

https://www.zhihu.com/people/foryouone

最后

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

• One(opens new window)

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

结束。