Mweb使用腾讯COS作为图床

2019-01-25 22:48:36

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

F9A1CBCE2ACD37E2D2591AD8613F9556


回归主题。接上上上上篇,使用腾讯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,并返回正确的链接。舒服了🐣🐣🦉

Flutter学习之旅——实用入坑指南

开篇: 一如前端深似海,从此节操是路人,从此再无安宁日,从此红尘是路人。要说技术更迭速度,还有比前端更快的么😂根本停不下来。这不,Google刚发布Flutter不到一年时间,1.0正式版发布不到两个月。阿里系的闲鱼老大哥,已经率先用Flutter重构了闲鱼,虽然没完全重构,但高频的重度页面都是Flutter的了。这一幕似曾相识,当初RN出来的时候不也是闲鱼团队先吃的螃蟹吗,在这里向闲鱼团队的老哥们致敬🐣。 既然老大哥都出动了,也侧面验证了这项技术的可行性。当小弟的也不能落后嘛,每天抽时间断断续续的学了两周时间,仿部分知乎的客户端,撸了一套客户端出来。前一周主要是熟悉Dart语言和常规的客户端布局方式,后一周主要是掌握使用HTTP的请求、下拉上拉、左滑右滑、长按等常用手势、相机调用、video播放等进阶用法。 两周下来,基本上可以开发80%以上常见的客户端需求。 前期一直在用simulator开发,略有卡顿,心中难免有些疑惑。结果最后release打包到手机后,竟然如丝般顺滑!!!简直喜出望外,完全可以睥睨原生开发,在这一点上的确要优于目前的RN。最重要的是作为Materail Design极简又有质感风格的鸭狗血粉丝,Flutter造出来的界面简直倍爽。至此正式入坑Flutter开发。Google万岁! Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

Flutter组件合集

Element Form 1、Input TextField 最常用的文本输入组件。 用户修改文本时,可通过Onchange获取最新的文本信息。 onSubmitted可获取到软键盘的确认按钮。 默认下方有一个横线,decoration属性可以设置图标、padding等更多属性 2、Checkbox CheckboxListTile 下拉复选框,带有复选框的ListTile,带有标签的ListTile 整个列表的图块是交互的,点击图块中的任意位置可切换复选框。 Checkbox 3、Button FlatButton 默认无边框,无背景色的按钮 FlatButton.icon 为带图标的 RaiseButton 凸起的按钮——带有shadow阴影的质感按钮 RaiseButton.icon 为带图标的 IconButton 纯图标按钮,无边框无背景色 PopupMenuButton 弹出菜单栏的图标。 PopupMenuButton 和 popupMenuItem 配合使用。 选择菜单项时,触发onSelected方法。 FloatingActionButton 默认的圆形悬浮按钮,每个页面最多一个。Scaffold.