给博客的 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 项就能接任意图床:
上传接口地址(必填)
图片文件字段名 + API Key 参数名(可选表单字段或请求头;不需要密钥就留空)
返回图片地址字段(点路径,如
data.url、image.url_viewer)返回地址替换(可选:查看页 → 直链,如
tutu.to/image/→t.tutu.to/img/)保存后点「测试连接」直接验证,能返回测试图地址就是对接成功
可以对接七牛云 / 腾讯云 COS,都在设置页改