Z-Blog 图床插件:写文章直接传图到免费图床

admin admin
2026-09-17 发布 | 950 字 | 预计 3 分钟 | 15 次阅读 | 0 条评论

给博客的 Z-Blog 做了个小插件,・在线传图"。说白点就是:写文章的时候,正文编辑器上方多了一块上传面板,图片点一下、拖进去或者直接 Ctrl+V 粘贴截图,就传到图床上,自动给你返回直链。图片不占你服务器空间,文章里全是外链。

为什么做这个?博客图片一般两条路:传自己服务器,空间带宽都吃紧,还得手动传、手动贴链接;用图床,又得先打开图床网站、传图、复制链接、再回编辑器粘贴,来回倒腾。这个插件把中间几步省了,传完直接 "复制链接 / 插入正文 / 设为封面" 三选一。

实现原理其实不复杂:

插件挂 Z-Blog 的钩子,在文章编辑页输出一块面板,前端只管收集图片;

上传时图片先发到你自己服务器的后台接口,后台校验文件类型和大小(jpg/png/gif/webp/bmp,默认上限 10MB),再用 cURL 转发给图床接口,把返回的图片直链交回前端;

为什么不直接让浏览器传图床?一个是跨域限制,更关键的是图床 API Key 放前端等于裸奔。Key 只存在你服务器数据库里,页面源代码里根本没有;

"设为封面" 用的是 Z-Blog 文章自定义字段 thumb,主题列表卡片直接读这个字段,所以设封面就是填一下字段的事。

功能就这几块,不堆花活:

点击选图、拖拽上传、Ctrl+V 粘贴截图,支持多张批量,带进度条;

上传完一键:复制链接、插入正文(UEditor、UEditorPlus、原生编辑器都兼容)、设为封面;

设置页能调:插入格式(HTML / 链接 / Markdown)、单张大小上限、面板开关、测试连接。

图床用的是兔兔图床 tutu.to,免费注册送 1GB 永久空间,不需要手机号,有现成的 API Key,国内访问速度也还行。

新增能力

  • 设置页图床下拉:兔兔图床 tutu.to(内置参数) / 自定义图床

  • 自定义模式填 4 项就能接任意图床:

    1. 上传接口地址(必填)

    2. 图片文件字段名 + API Key 参数名(可选表单字段或请求头;不需要密钥就留空)

    3. 返回图片地址字段(点路径,如 data.urlimage.url_viewer

    4. 返回地址替换(可选:查看页 → 直链,如 tutu.to/image/t.tutu.to/img/

  • 保存后点「测试连接」直接验证,能返回测试图地址就是对接成功

  • 可以对接七牛云 / 腾讯云 COS,都在设置页改


附件下载

付费 ¥99
图床插件_v1.1.0_公开版.zip18.9 KB
图床插件_v1.2.0_公开版.zip21.8 KB
全文完
全站文章均为原创,转载请保留署名和出处。
阅读 15 次