Mweb使用腾讯COS作为图床

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

F9A1CBCE2ACD37E2D2591AD8613F9556


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

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

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

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
* 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,并返回正确的链接。舒服了🐣🐣🦉

Author

Ludis

Posted on

2019-01-25

Updated on

2019-04-13

Licensed under

Comments