如何通过 WordPress API 上传图片到媒体库

本文将展示下，如何在 Obsidian 编辑器中，如何配置插件，使用 WordPress API 上传图片到站点图片库。

1. 为站点安装 restAPI 认证插件

   WordPress 官方只支持 cookie 认证，需要使用参数，X-WP-Nonce，这种方式并不友好，所以官方也推荐使用认证的插件，这里我们使用了WordPress REST API Authentication
   

2. 设置认证插件

   插件启用后，进入配置界面，选择免费的 JWT AUTHENTICATION，再选择免费的 HS256 加密，在下方表格中，输入正确的登录用户名和密码，点击 Fetch Tokens，
   
   
   
   记录好返回值，jwt_token 对应的内容，形如，eyJhbGciO…CJ9.ey…Xmg，这里生成的 token，过期时间为5年，够用了。

3. 安装 PicGo 插件

   PicGo 是一款本地运行的插件，支持将本地图片上传到图床，也能支持任何的 restapi，上传图片。下载地址在这里，Github PicGo
   PicGo 默认支持上传到阿里云、腾讯云等云存储空间，要支持上传到其它存储空间，需要安装插件，这次我们选择安装插件，自定义 web 图床。
   PicGo 插件设置中，搜索 web-uploader，这里点击 web-uploader 1.1.1，安装。
   
   

4. 设置 PicGo 插件

   上一步完成后，可以在左侧列表中，看到新安装的插件，点击后可以设置参数。
   
   
   
   参数项目内容如下：
   API地址 : https://你的网站地址.com/wp-json/wp/v2/media
   POST参数名 : file
   JSON路径 : media_details.sizes.medium.source_url
   自定义请求头: {“Authorizationu”:”Bearer 保存的 JWT TOKEN”}

5. PicGo 自动压缩图片插件

   一般情况下，WordPress 不会对图片文件压缩，我们可以在上传图片前做图片压缩处理，提升站点展示速度。
   当然也可以在图片上传后，使用 WordPress 插件压缩所有的图片；比如下文提及的 TinyPNG 官方提供的 Tiny Compress Images。TinyPNG 大概能无损压缩 60%。
   安装
   和上面一样，在 PicGo 的插件列表中，搜索 picgo-plugin-compress，安装作者为 juzisang 的图片压缩组件，此组件使用 TinyPNG的在线服务，无损压缩图片；TinyPNG 每月有 500 张图片处理的免费次数，每月超限的用户，可以配置多个 ApiKey 白嫖。
   设置
   如果需要使用TinyPNG 的无损压缩服务，需要注册 TinyPNG 的 API 服务，链接在这里。
   注册完毕后，注册邮箱中会收到有一封邮件，点击访问 dashboard，点击后在后台管理界面中，启用 API Key。
   复制此 API Key，填入 插件的配置中，并且在插件界面点击 “启用 transformer -compress”，开启压缩功能；
   问题
   1. 可能碰到安装的问题，无法在界面安装完毕，可以在 PicGo 的用户数据目录，执行 npm install picgo-plugin-compress –ignore-scripts 完成安装，注意这个参数，–ignore-scripts，不执行脚本，否则有可能安装不成功。
   2. TinyPNG 模块无法使用，错误信息：TypeError: req.end is not a function
   错误原因：PicGO 更新到 2.3.1，PicGo底层上传库从 request 迁移至 axios ，理论上对旧有插件是兼容的，如果插件遇到不兼容的情况请开发者参考 PicGo-Core 的 PicGo/PicGo-Core#65 进行适配。此图片压缩插件没有同步更新导致错误。
   修复：下载工程源代码，地址在这里，修改，将涉及到 PicGo.Request 代码改成 Axios 的方式去调用。千万不要尝试修改 node_modules 中的代码，这里的代码是编译后的代码，加入很多非人类能阅读的代码，修改低效还不方便阅读。
   源码修改：fork github 上 picgo-plugin-compress 代码，clone 到本地后，修改两处即可。
   
   srcutil.ts，13行修改为：
   const response = await ctx.request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })
   
   src\compress\tinypng\tinypng.ts，86-93 行修改为：
   if (options.buffer) {
this.PicGo.log.info('TinyPng 上传本地图片')
Object.assign(fetchOptions, { data: options.buffer })
}
const req = this.PicGo.request(fetchOptions)
   
   执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。

6. PicGo 自动化水印插件

   为图片添加水印，可以通过 PicGo 的插件来完成，比如 picgo-plugin-watermark。
   安装
   此插件可能不能从插件列表界面安装，而是需要通过在用户数据目录，执行 npm install picgo-plugin-watermark，来完成安装；
   macOS 下，用户数据目录：/Users/lixuan/Library/Application Support/picgo 下，直接执行安装命令， npm install picgo-plugin-watermark。
   Windows 下，Windows 下在插件安装界面，直接搜索 picgo-plugin-watermark 、安装看能否完成，如果不能完成，需要在用户数据目录：用户数据目录在，C:\Users\XXX\AppData\Roaming\picgo 下，执行npm install picgo-plugin-watermark 命令安装，命令方式安装时，会检查用户是否安装 Visual Studio Desktop development with C++ 的环境，如果没有可能会安装失败。
   设置
   Windows 平台下，需要下载 Arial Unicode MS.ttf 字体；可能的配置参数：
   字体路径，C:\Users\xxx\AppData\Local\Microsoft\Windows\Fonts\Arial Unicode MS.ttf 或者 /System/Library/Fonts/Supplemental/Arial Unicode.ttf
   颜色 ，#2e8b57
   字号，28px
   显示位置，rb
   

7. 安装自动上传图片插件

   在 Obsidian 设置中，找到第三方插件列表 – 社区插件市场，搜索 Image Auto Upload，安装自动上传图片插件，设置项保持默认即可。

8. 测试可用性

   在 Obsidian 中，编辑文件，直接粘贴图片，图片数据将被直接上传到服务器，打开站点后台管理中的媒体库，看看是否上传成功。