图片自动上传到图床

原文链接:https://www.jianshu.com/p/2df221a99e6c

我是用的SM.MS图床+PicGO+Typora

PicGo:https://picgo.github.io/PicGo-Doc/

SM.MS图床:https://sm.ms/

SM.MS图床插件:https://github.com/xlzy520/picgo-plugin-smms-user(必须安装才能使用SM.MS图床)

Markdown笔记之Typora + PicGo +Github:图片自动上传到图床!


发表时间:2020年4月25日 by 小灰啾

相信如果你使用过Typora一定会为Typora的简洁而又强大编辑功能赞不绝口。「它的功能之强大、设计之冷静、体验之美妙、理念之先进」,相信这句话有点溢美之词但是也说明了Typora在众多Markdown编辑器中收到广大码农的喜爱。下面就来探究一下Typora的最新支持PicGo,通过剪切板或者拖入本地图片即可==自动上传==到图床,在移植到“简书”、“Github”等网站时免除了图片引用的困扰。

工具列表:

  • Typora:version 0.9.86(beta)
  • PicGo:version 2.2.2
  • Github:github账号

Typora与PicGO为当下最新版本。

  1. 安装Typora

    可以从Typora官网下载最新版;也可以直接在公众号【小灰啾】回复“Typora”获取下载链接。

    下载后直接安装即可。

  2. 安装PicGo

    可以直接在github上下载最新版;众所周知的原因,如果github网络不稳定可以在公众号【小灰啾】回复”Typora”获取下载链接,直接安装即可。

    PicGo,这是一款图片上传的工具,目前支持微博图床七牛图床腾讯云又拍云GitHub等图床,未来将支持更多图床。

  3. 获取token

    1. 创建仓库

    img

    image

    1. 获取token

      • 点击网页右上角头像settings选项,进入设置界面,点击最下面的Developer settings

        img

        image

      • 再点击Personal access tokens,进入界面后点击Generate new token

        img

        image

  • 进入界面后填写Note并全选中Select scopesrepo项,然后再点击最下面的Generate new token

    img

    image

  • 进入界面后会产生新的token,确保复制新的token并保存下来,下次进入github将无法再次看到它,会重新产生一个token到此token获取完成。

    img

    image

  1. 配置PicGo

    1. 打开安装完的PicGo,在图床设置-->GitHub图床,填入配置信息

      img

      image

      其中,各参数如下表

|      参数      |                             解释                             |
| :------------: | :----------------------------------------------------------: |
|  *设定仓库名   |               账号名/仓库名,如 liu6010/mybed1               |
|  *设定分支名   |                        默认为:master                        |
|   *设定Token   |           这就是`步骤3`获取的`Token`,复制在这即可           |
|  指定存储路径  | 可选项,为了方便图片管理建议使用:img/ 会在repository下创建一个`img`文件夹 |
| 设定自定义域名 | <small>自定义域名的作用是,在上传图片后成功后, PicGo会将“自定义域名+上传的图片名”生成的访问链接,放到剪切板上 `https://raw.githubusercontent.com/用户名/RepositoryName/分支名` ,自定义域名需要按照这样去填写</small> |
  1. 打开时间戳重命名

    这是因为在上传图片时,如果多次上传同一张图片时会因为文件已存在而报错,因此在PicGo-->时间戳重命名打开,在上传图片名后加入时间戳不会因为文件名重复而报错。

    img

    image

  1. 测试是否配置成功

    将图片拖入上传区,显示上传成功则表明配置成功

    img

    8.png

  2. 配置Typora

    1. 打开Typora,在文件-->偏好设置点击图像进行下面配置:

      img

      9.png

  3. 验证图片上传选项

    点击验证图片上传选项,查看是否成功。提示验证成功就表示无问题。

    img

    10.png

    注意:验证成功后,关掉Typora重启一下,否则会在正文上传图片会出现下面报错:

    img

    11.png

  4. 上传图片

    将图片拖入正文,或使用截图直接从剪切板直接复制到正文中,Typora会自动上传,若没自动上传可选中图片右击鼠标点击上传图片格式-->图像-->上传所以本地图片

    上传图片成功:

    img 12.png

    这时,如果上传成功且出现了图片,那么你可以欢呼了!


    显然,抽奖从未中过奖的我没有那份幸运:sob: :sob: :sob:(已经成功的下面可自动忽略)

    出现下面问题,上传成功但是图片显示不出来。登录github查看图片也无法显示,且github头像也无法显示。

    img

    13.png

    可以使用下面方式:

    • 打开路径C:\Windows\System32\drivers\etc下的hosts文件

      可以使用记事本打开

    • hosts文件里面复制粘贴以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# GitHub Start 
192.30.253.112 github.com
192.30.253.119 gist.github.com
151.101.184.133 assets-cdn.github.com
151.101.184.133 raw.githubusercontent.com
151.101.184.133 gist.githubusercontent.com
151.101.184.133 cloud.githubusercontent.com
151.101.184.133 camo.githubusercontent.com
151.101.184.133 avatars0.githubusercontent.com
151.101.184.133 avatars1.githubusercontent.com
151.101.184.133 avatars2.githubusercontent.com
151.101.184.133 avatars3.githubusercontent.com
151.101.184.133 avatars4.githubusercontent.com
151.101.184.133 avatars5.githubusercontent.com
151.101.184.133 avatars6.githubusercontent.com
151.101.184.133 avatars7.githubusercontent.com
151.101.184.133 avatars8.githubusercontent.com

# GitHub End
直接保存即可,然后重启`Typora`图片就能正常显示了。
  • 如果保存提示没有权限,可以退出,将hosts拖到桌面再打开复制进去,保存后再将hosts拖入到原文件夹。然后重启Typora即可。

现在你就可以随心所欲使用啦!每次截图之后你就可以直接复制到编辑器中,将其转化成网络链接了。


如果你在配置过程出现{"success",false}、Failed to fetch等错误,可以参考知乎大佬LeonG的文章,里面也有开发者的解答。