前言

前面已经搭建好了个人图床chevereto，接下来就是怎么让Typora去跟chevereto建立关联，实现Typora的图片上传，之前一直因为图片存储的关系觉得Typora不好用，反而喜欢腾讯文档、语雀、石墨文档这样的在线markdown文档，因为有chevereto的加持，我决定逐渐弃用在线编辑器文档，转向Typora了。

配置chevereto

创建chevereto相册

首先应该在chevereto创建一个专用的相册，用于存储Typora的图片。这里我新建了一个Typora相册。

右上角[用户]--> [相册]--> [新建相册]--> 填写相册信息，因为都是文档里调用的图片，选择访客开放就可以。

获取chevereto相册 ID

点击新创建的相册[Typora]--> [详细信息]，可以查询跟Typora相册相关的信息，这里相册的id后续会用到。

获取cheveretoAPI密钥

chevereto的设置里面，提供了各种各样的设置选项，这里的API设置项提供了通过接口调用chevereto的密钥。

有了这里的API v1 密钥，程序就能够直接登录chevereto，我们需要用到这个参数，但这是个非常重要也非常危险的参数，一定不能泄露。

添加API上传参数

客户端上传图片需要指定用户和相册id，这样才能准确地将图片存储到对应的相册里，否则就会上传到访客相册。

第一步：
打开跟API调用相关的配置文件，添加$user、$album参数。（这个文件之前已经挂载出来了，直接在宿主机更改保存）

# vim /data/chevereto/app/chevereto/app/routes/overrides/route.api.php
$route = function ($handler) {
    try {
        $version = $handler->request[0];
        $action = $handler->request[1];
        $user = $_REQUEST['user']; //新增
        $album = $_REQUEST['album']; //新增

第二步：
重启chevereto，重新加载配置

# docker restart chevereto-app-1
或者
# docker-compose restart 

到这里，chevereto就配置好了！

部署PicGo

可以通过下面的这张图来理解Typora+PicGo+chevereto的工作流程。PicGo是一个用于上传图片到图床的应用，我们可以直接运行PicGo的PC客户端来上传图片，也可以从第三方软件调用PicGo接口来上传图片。

而且PicGo是typora默认上传图片的插件，点击Typora[文件]--> [偏好设置]--> [图像]，在上传服务设定可以看到关于Typora配置PicGo插件的选项。

由于国内的网络限制，无法从Typora直接下载PicGo插件，所以需要自己部署，再通过命令调用。这里提供两种部署方案。

第一种方案：

国内提供了界面化客户端的多个下载地址，可以直接下载带可视化界面的客户端，安装完成后在插件功能里下载chevereto的相关插件并进行配置，就能正常上传图片到Chevereto图床。不过我没有使用这种方式。

第二种方案：
部署PicGo的最小化命令行工具，通过windows命令行调用PicGo接口来上传图片。相比起来这样更轻量，因为电脑上还要运行很多其他的软件，我选择了这种部署方案。

部署nodejs

nodejs下载地址

首先要部署PicGo的依赖Nodejs服务，可以看到Node为Windows提供了好几种安装方式，这里采用Prebuilt Installer的方式下载msi文件，如果对windows操作系统还不够熟悉，msi就是比较推荐的一种方式。

下载完成后，双击msi文件开始安装，全部选项都采用默认就可以。安装好nodejs后，可以用下面的命令验证有没有安装成功。

C:\Users\kyadmin>node -v
v20.15.0
C:\Users\kyadmin>npm -v
10.7.0

设置npm镜像

因为国内的网络限制默认的仓库连不上，所以这里把默认的npm镜像仓库替换成阿里的镜像仓库。

# 查看镜像
# C:\Users\kyadmin> npm get registry
https://registry.npmjs.org/

#修改镜像
npm config set registry https://registry.npm.taobao.org/

安装PicGo

安装PicGo

#下载
# npm install -g picgo

#验证是否成功
# picgo -v
# C:\Users\kyadmin> where picgo
C:\Users\kyadmin\AppData\Roaming\npm\picgo
C:\Users\kyadmin\AppData\Roaming\npm\picgo.cmd

安装web-uploader插件(这是从npm仓库下载的，如果网络不通就无法下载)

# picgo install web-uploader

配置PicGo

找到picgo的config.json文件，一般会在C:\Users\登录用户\.picgo\config.json。

删除picgo的config.json文件里面所有内容，添加下面的配置：

key：填写chevereto的API密钥

user：填写chevereto上的用户

album：填写chevereto上的相册id

url：填写图床的访问域名，注意：/api/1/upload这个uri不需要改动

{
  "picBed": {
    "uploader": "web-uploader",
    "current": "web-uploader",
    "transformer": "path",
    "web-uploader": {
      "customBody": "{\"key\":\"0000000000000000000000000\", \"user\":\"chevereto_user\", \"album\":\"1\"}",
      "customHeader": null,
      "jsonPath": "image.url",
      "paramName": "source",
      "url": "https://domain.com/api/1/upload"
    }
  },
  "picgoPlugins": {
    "picgo-plugin-web-uploader@1.1.1": true,
    "picgo-plugin-web-uploader": true
  }
}

配置完成之后，在鼠标剪切板复制一张图片，然后执行下面的命令，然后发现剪切板的图片已经上传到图床了。如果上传没有成功，考虑是config.json参数配置有问题。

# C:\Users\kyadmin> picgo upload -c C:\Users\登录用户\.picgo\config.json

配置Typora

点击[文件]-->[偏好设置]

选择[图像]-->[上传服务设定]

1. 上传服务选择自定义命令

2. 命令填写：picgo upload -c C:\Users\登录用户\.picgo\config.json。

3. 点击验证图片上传选项，这一步会把Typora的logo作为图片传到图床。

4. 还需要设置插入图片自动上传

   • [插入图片时]的动作设置为[上传图片]，并勾选：
   • [对本地位置的图片应用上述规则]：作用是当插入截图时，会自动保存到本地和上传图床。
   • [对网络位置的图片应用上述规则]：作用是插入网络链接时，将链接中的网络图片上传到图床（会因为防盗链机制失效）。
   • [允许根据YAML设置自动上传图片]：通过读取 YAML 配置来决定是否自动上传图片，这一项可以不选，一般用不到。

如果Typora返回结果是这样，说明上传成功了。

一般来说，如果在配置config.json的步骤验证成功，这里就不会有什么问题。

使用 Typota

通过以上的设置，已经可以实现在文档里插入图片自动上传图床。

对于之前已经写好的文档中的图片，直接右键图片，点[上传图片]就可以上传了。

结束

由于chevereto使用了旧版本，也许不久就需要进行升级了，在docker-compose.yal文件中更换chevereto镜像后，执行docker-compose up -d就可以启动新版本了，因为数据库数据和图床的图片是挂载到宿主机的，重新生成容器数据也不会丢失。

总的来说步骤还是有点繁琐，这里先记录下来。