Typora + PicGo + Gitee 实现markdown图片自动转链，自动上传

前言

原文链接：https://zhuanlan.zhihu.com/p/102594554

PicGo + Gitee(码云)实现markdown图床

前言：深感在线博客的编辑器坑太多了，文档丢失、必须联网、可移植性太差，所以开始寻找可替代的方案。

markdown是一门易于上手能帮助作者专心写作的文档编辑语言，它的好处太多了，建议想自己动手做笔记写博客的朋友都可以学一学，10分钟上手（我昨天晚上还不会用，今天就开始用它写博客了。。足以证明它是真的很简单）

Tpyora是一款优雅的markdown编辑器，也推荐给大家，至于安装和配置，比安装word还简单，就不赘述了

但是，这都不是重点，重点是咱们写博客的时候，总是需要插入图片的，图片存在本地的话上传到博客网站去就没法显示了，就算一个图一个图的复制粘贴上去，想移植到其他的博客网站，图就会失效，我们就需要图床

图床是干什么的？
图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后，在自己博客中插入的图片链接就可以随时随地在线预览了，并且不会因为任何意外原因无法查看，除非自己亲自删除。

神奇的PicGo就是为了解决这个问题诞生的，它可以将图片上传到指定的图床上，然后返回markdown链接，直接粘贴到你的文档中，就搞定啦

问题又来了，网上推荐七牛云阿里云都是要租赁服务器的，太麻烦还要钱，微博现在挂链接又很厉害。大部分人选择用github，但是github虽好却是国外的网站，速度终究比不上国内网站，研究了小半天，终于发现完美的解决方案

最终决定使用PicGo + 国内的github - 码云来实现markdown图床

废话说到这里，开始进入正题

---

1. 安装

• PicGo
• picgo-plugin-gitee-uploader插件

首先打开picgo官网，下载安装包

速度有点慢，没关系，PicGo2.1.2的安装包下面链接自取

安装之后打开主界面

选择最底下的插件设置，搜索gitee

点击右边的gitee-uploader 1.1.2开始安装

这里注意一下，必须要先安装node.js才能安装插件，没装的自己装一下，然后重启就行。

这个地方有两个插件，我试了一遍，两个都能用，大家看心情选择，先说一下右边这个gitee-uploader 1.1.2，用不了的同学就选左边那个，我都会讲一遍配置

---

2. 建立gitee（码云）图床库

注册码云的方法很简单，网站引导都是中文，不多说了，我们直接建立自己的图床库。

点击右上角的+号，新建仓库

新建仓库的要点如下：

1. 输入一个仓库名称
2. 其次将仓库设为公开（为的是markdown里可以读取展示这张图片）
3. 勾选使用Readme文件初始化这个仓库

这个选项勾上，这样码云会自动给你的仓库建立master分支，这点很重要!!! 我因为这点折腾了很久，因为使用github做图床picgo好像会自动帮你生成master分支，而picgo里的gitee插件不会帮你自动生成分支。

点击创建进入下一步

---

3. 配置PicGo

安装了gitee-uploader 1.1.2插件之后，我们开始配置插件

配置插件的要点如下：

• repo：用户名/仓库名称，比如我自己的仓库leonG7/blogImage，找不到的可以直接复制仓库的url

• branch：分支，这里写上master
• token：填入码云的私人令牌
• path：路径，一般写上img
• customPath：提交消息，这一项和下一项customURL都不用填。在提交到码云后，会显示提交消息，插件默认提交的是 Upload 图片名 by picGo - 时间

这个token怎么获取，下面登录进自己的码云

1. 点击头像，进入设置

1. 找到右边安全设置里面的私人令牌

1. 点击生成新令牌，把projects这一项勾上，其他的不用勾，然后提交

这里需要验证一下密码，验证密码之后会出来一串数字，这一串数字就是你的token，将这串数字复制到刚才的配置里面去。

注意：这个令牌只会明文显示一次，建议在配置插件的时候再来生成令牌，直接复制进去，搞丢了又要重新生成一个。

现在保存你刚才的配置，然后将它设置为默认图床，大功告成。

还有一个插件gitee 1.2.2-beta，功能差不多，刚才那个能用的话就不需要用这个，配置的内容有点差别，简单说一下：

• url：图床网站，这里写码云的主页 https://gitee.com
• owner：所有者，写上你的码云账号名，如果你不知道你的账号名，进入你刚才的仓库，浏览器url里面有

• repo：仓库名称，只要写上仓库名称就行，比如我自己的仓库blogImage
• path：写上路径，一般是img，这几个项都不用加“ / “符号
• token：刚才你获取的个人令牌，两个插件是通用的，如果你用了另一个再来用这个，它会自动读取另一个插件的部分配置，不用重新申请
• message：不用填

---

4. 测试

随便选一张图片上传（picgo也支持剪贴板上传，截图工具推荐win10的Snipaste神器！），试试看

超级快有木有！比github快很多，0.1秒上传，而且导入到你的markdown编辑器里面也是秒识别你的图片内容，而如果是github图床上传太慢不说可能还会出现下面这样识别不出来的问题！

上传之后默认复制链接，直接粘贴到你的markdown编辑器里，就可以愉快的进行写作了！

最后推荐一下我的博客写作套件Typora + PicGo + Snipaste，Typora写文档，Snipaste一键截图，PicGo一键上传图片返回链接。

Typora 配置上传服务

配置

打开typora，点开左上角文件，选择偏好设置

1. 设置插入图片时为【上传图片】
2. 勾选【对本地位置的图片应用上述规则】
3. 在上传服务中选择“PicGo(app)”
4. 在路径中选择picgo安装目录PicGo.exe

点击下面的验证图片上传选项，上传成功！

上传的方法也很简单，将图片复制进去typora就会自动帮你上传了，你也可以右键点击上传图片。

可以在【格式】->【图像】->【上传所有图片】

当然，要是这么简单的话我肯定不会写成博客的，下面就带大家一起排排坑~

错误排查

错误一：Failed to fetch

这个错误一般是由端口设置错误造成的，至于我为什么知道，你看看log文件就懂了。打开picgo的log文件

错误提示是端口繁忙。

解决方法：打开picgo设置，点击设置Server选项，将端口改为36677端口，这是picgo推荐的默认端口号，然后保存，成功。

不过有的时候，我们的老朋友Failed to fetch还是如约而至，打开端口设置一看，怎么变成了366771？？？？

问题在于端口冲突，如果你打开了多个picgo程序，就会端口冲突，picgo自动帮你把36677端口改为366771端口，导致错误。log文件里也写得很清楚。

解决方法：先把picgo中的端口设置改回36677，然后退出所有picgo程序，再使用typora上传功能（会自动启动picgo程序）

错误二：{“success”,false}

这个错误相信也有很多小伙伴遇到了，原因是文件名冲突了，如果你上传过一张image1.jpg的图片，再上传名称一样的图片就会失败，康康log文件(感谢日志！)里也写到了。

办法也很简单，打开picgo设置，将【时间戳重命名】打开。如图所示：

再次上传文件，上传成功~

授人以鱼不如授人以渔，上面的三种情况解决方法教给大家了，但是错误总是千奇百怪层出不穷的，如果下次出现上传错误的提示，请大家找到picgo的log文件，自己查看问题的原因嗷

我要说的

按照上文配置是完全没有问题的 ps:2020.4.17 测试

这里有两点想要跟大家讲一下

1. 如果你删除了 PicGo 相册里的相片，gitee 上的图片也会一同删除，之前的链接也会失效
   • 所以，没事不要随意删除相册里的相片
2. 个人测试QQ截图直接ctrl + v到 typora 里不会自动上传图片
   • 但是我们可以在写完博客后，点击 typora 菜单里的 格式 - 图像 - 上传所有本地图片（只需一步操作也上传了所有本地图片）
   • 拖拽到 typora 里的图片会自动上传

祝你用的愉快，加油鸭！