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，并返回正确的链接。舒服了🐣🐣🦉