Mweb使用腾讯COS作为图床

新入一盆小老弟同款熊爪，取名金风。

---

回归主题。接上上上上篇，使用腾讯 COS 替代七牛作为图床之后。平时使用 Mweb 作为 Markdown 写作软件，用着蛮舒服的。但是 Mweb 集成的图床是七牛的图床，腾讯 COS 的没有集成。每次发布文章前要把文章中的图片手动上传，然后复制链接。😂 当文章中的图片比较多的时候，我发现太扯淡了…所以想着整个上传的 API。结果找了一圈没发现现成的轮子，只能自己造一个了。

思路比较简单，就是利用 Mweb 可配置自定义的图片上传功能。写一个腾讯 COS 上传图片的接口，然后配置到 Mweb 中即可。同时可配置 CDN 加速、图片处理规则。

github: https://github.com/flute/Mweb_tencet_cos

代码如下：

/**
 * MWeb使用腾讯云存储COS作为图床
 * 利用COS API，用nodejs作为server上传图片，添加至MWeb的配置中即可
 * 2019-01-25 23:00
 * author: ludis
 * github: https://github.com/flute/Mweb_tencet_cos
 * COS Doc: https://cloud.tencent.com/document/product/436/8629
 */

const express = require("express");
// form表单需要的中间件。
const mutipart = require("connect-multiparty");
//  Tecent COS
const COS = require("cos-nodejs-sdk-v5");

const config = {
  // 本地文件临时路径
  temporaryUploadDir: "./temporary",
  // node服务启动端口
  defaultPort: 3000,
  // 到 控制台密钥管理 获取您的项目 SecretId 和 SecretKey。
  // https://console.cloud.tencent.com/capi
  secretId: "AKIDsipmK32L..XXXXX..OuOtbSDFpair",
  secretKey: "VzSwGaimpHj..XXXXX..IoQAn1FMMSVcUz",
  // 到 COS 对象存储控制台 创建存储桶，得到 Bucket（存储桶名称） 和 Region（地域名称）。
  // https://console.cloud.tencent.com/cos4
  bucket: "ludis-1252396698",
  region: "ap-beijing",
  // 文件上传后的路径前缀，如上传 test.png 后存储的目录为 ghost/flutter/test.png
  preUrl: "ghost/images/flutter",
  // 文件上传后的域名
  // 上传成功默认域名： ludis-1252396698.cos.ap-beijing.myqcloud.com
  // 实用万象优图，处理图片
  // 默认图片处理域名： ludis-1252396698.picbj.myqcloud.com
  // 使用cdn加速域名：  ludis-1252396698.image.myqcloud.com
  domain: "ludis-1252396698.image.myqcloud.com",
  // 图片处理规则，没有可为空
  rule: "!ghost",
};

// 使用永久密钥创建实例
const cos = new COS({
  SecretId: config.secretId,
  SecretKey: config.secretKey,
});

const mutipartMiddeware = mutipart();
const app = express();

app.use(
  mutipart({
    uploadDir: config.temporaryUploadDir,
  })
);
app.set("port", process.env.PORT || config.defaultPort);
app.listen(app.get("port"), function () {
  console.log(
    `Express started on http://localhost: ${app.get(
      "port"
    )} ; press Ctrl-C to terminate.`
  );
});

app.post("/upload", mutipartMiddeware, (req, res) => {
  // 获取文件名、路劲（临时路劲）
  const { name, path } = req.files.file;
  // 上传
  upload(name, path, (url) => {
    if (url)
      res.json({
        url: url,
      });
    else res.send("upload failed!");
  });
});

const upload = (name, path, callback) => {
  // 分片上传
  cos.sliceUploadFile(
    {
      Bucket: config.bucket,
      Region: config.region,
      Key: `${preUrl}/${name}`,
      FilePath: path,
    },
    function (err, data) {
      console.log(err, data);
      if (err) {
        callback(null);
      } else {
        callback(`https://${config.domain}/${data.Key}${config.rule}`);
      }
    }
  );
};

配置config中所需的各类信息后，启动 node 服务即可。

然后在 Mwe 偏好设置中进行配置：

配置完成后。上传图片至图床即可。

哦了，这样文章中的所有图片已经自动上传至腾讯 COS，并返回正确的链接。舒服了 🐣🐣🦉