把图床的范围拉广，我选用 PicGo 插件来接入青云对象存储

2023-12-28 08:34:41

使用图床软件能够将上传至图床上的图片转换成 Markdown 格式的链接，从而更便于我们在写作时引用图片，所以受到很多人的欢迎。不过市面上能够用的图床软件不少，但是真正用起来顺手好用的却寥寥无几。特别是当我们有一些需求较为冷门的图床时，想要找到一款现成的图床软件来支持，往往不太现实。

为了解决这个问题，图床软件 PicGo 应运而生。这款软件的一大特色就是允许用户自定义开发插件，所以哪怕是一些冷门的图床，我们也可以通过开发一个插件来轻松接入。在本文中，我就将 PicGo 开发为新图床，并接入了青云对象存储，感兴趣的朋友不妨参考一下。

插件开发

创建插件项目

首先，我们需要创建一个插件项目，可以通过以下命令进行：

picgo-core new-plugin picgo-plugin-qingstor

其中 picgo-plugin-qingstor 是插件的名称，可以根据自己的喜好进行修改。

创建成功后，我们进入到插件项目目录中，可以看到其中的文件结构如下：

picgo-plugin-qingstor
├── README.md
├── config.json
├── index.js
├── package.json
└── test
    ├── example.js
    └── index.js

其中，config.json 是插件的配置文件，index.js 是插件的主文件，package.json 是项目的配置文件，test 目录下是测试代码。

配置插件

接下来，我们需要在 config.json 文件中配置插件的选项。以青云对象存储为例，我们需要配置以下选项：

{
  "name": "qingstor",
  "description": "QingStor图床插件",
  "version": "1.0.0",
  "author": "Your Name",
  "options": [
    {
      "name": "access_key_id",
      "type": "string",
      "description": "青云对象存储的Access Key ID",
      "required": true
    },
    {
      "name": "secret_access_key",
      "type": "string",
      "description": "青云对象存储的Secret Access Key",
      "required": true
    },
    {
      "name": "zone",
      "type": "string",
      "description": "青云对象存储的Zone",
      "required": true
    },
    {
      "name": "bucket",
      "type": "string",
      "description": "青云对象存储的Bucket",
      "required": true
    }
  ]
}

其中，name 是插件的名称，description 是插件的，version 是插件的版本，author 是插件的作者，options 是插件的选项。

编写插件代码

接下来，我们需要在 index.js 文件中编写插件的代码。以青云对象存储为例，我们需要编写以下代码：

const path = require('path')
const qiniu = require('qiniu')

module.exports = (ctx) => {
  const accessKey = ctx.getConfig('access_key_id')
  const secretKey = ctx.getConfig('secret_access_key')
  const zone = ctx.getConfig('zone')
  const bucket = ctx.getConfig('bucket')

  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
  const config = new qiniu.conf.Config({
    useCdnDomain: true,
    zone: qiniu.zone[zone]
  })
  const client = new qiniu.rs.Client(mac, config)

  return {
    upload: async (file) => {
      const key = path.basename(file.path)
      const data = await client.uploadFile(bucket, key, file.path)
      return {
        url: `http://${data.key}.${data.bucket}.qbox.me`
      }
    }
  }
}