•  

一、前言

Typora
首先介绍一下Typora,最强Markdown编辑器,风格简约,功能强大,特别是支持图片复制粘贴,现在又有了图片自动上传服务器返回url的功能了,再也不用先上传图片到图床,然后再去引用图片了。

七牛云
七牛云,强推荐,免费,注册认证给10G永久免费空间,好良心呀,有免费SSL证书。
七牛云30天会收回测试域名,所以你需要有自己的域名,并且绑定。

二、效果展示

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_图床
自动上传到图床,并且返回url。
好方便啊有木有。

三、正文

3-1、Typora软件的设置

首先打开Typora,选择“文件→偏好设置→图像”:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_图床_02
跟着步骤进行操作:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_03
等待下载完毕,点击打开配置文件,将下面内容复制进去:

{
    "picBed": {
      "uploader": "qiniu",
      "qiniu": {
        "accessKey": "",
        "secretKey": "",
        "bucket": "", // 存储空间名
        "url": "", // 自定义域名
        "area":  "", // 存储区域编号
        "options": "", // 网址后缀,比如?imgslim
        "path": "img/" // 自定义存储路径,比如 img/
      }
    },
    "picgoPlugins": {}
}

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_04
接下来,就需要注册七牛云,然后将每个参数都补充完整。

3-2、七牛云的注册

3-2-1、注册账号

首先进入官网https://www.qiniu.com/注册账号:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_05
下一步:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_图床_06

3-2-2、实名认证

然后进行实名认证https://portal.qiniu.com/user/profile
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_http_07

3-2-3、绑定域名

如果有自己的域名就绑定自己的域名,如果没有域名,就可以用测试域名,但是测试域名7天就回收了,就不能用了,最好有自己的域名:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_08
域名的申请https://console.bce.baidu.com/bcd/#/bcd/overview
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_http_09
价格都不太一样,买完还需要进行域名备案,备案还挺麻烦的,我申请了很多次才通过了:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_10
不过基本1-3周也能搞定。

3-2-4、新建空间

进入控制台后,点击空间管理,https://portal.qiniu.com/kodo/bucket,然后点击新建空间:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_typora_11
储存空间名称和储存区域需要记下来,后面要用到:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_12
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_13

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_typora_14

3-3、参数补充完整

下面就需要进行参数补充:

{
    "picBed": {
      "uploader": "qiniu",
      "qiniu": {
        "accessKey": "",
        "secretKey": "",
        "bucket": "", // 存储空间名
        "url": "", // 自定义域名
        "area":  "", // 存储区域编号
        "options": "", // 网址后缀,比如?imgslim
        "path": "img/" // 自定义存储路径,比如 img/
      }
    },
    "picgoPlugins": {}
}

accessKey、secretKey

点击右上角头像,选择密匙管理:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_15
将下面参数复制粘贴到指定字段后:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_typora_16

bucket、area

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_13
bucket=储存空间名称
area=储存区域,填入存储区域的编号即可

url

点击空间管理,点击域名管理:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_typora_18
协议+域名就是url字段的值:

比如我的是:
http://cdn.qq764424567.top

如果是HTTPS协议,那么就是:
https://cdn.qq764424567.top

总体如下:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_typora_19

3-4、测试上传图片

3-4-1、上传成功字样

打开Typora,选择验证图片上传选项:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_http_20
出现成功上传图片的字样说明成功了:
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_21

3-4-2、错误解决

当然,也可能出现以下错误:

613 错误

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_图床_22
这个是你存储空间的名称写错了,在检查一下存储空间的名称。

400 错误

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_http_23
这个是存储区域错误,看一下编号是不是写错了。
最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_原力计划_24

401 错误

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_http_25

这个是accessKey或者secretKey填入错误。

平台标识错误

最强MarkDown编辑器Typora+图床七牛云实现图片自动上传_markdown_26

uploader:
qiniu:七牛云
gitee:码云
aliyun:阿里云

这个参数不要写错了