PicGo+Typora+腾讯COS自动将图片上传到图床

Typora真是我用过最好用的一款Markdown软件,前段时间收费也第一时间入正支持了,目前几乎所有的写作都要使用,而且配合Pandoc可以很方便的导出各种格式,对我来说也算是强大的生产力工具了。

不过,对于写作过程中图片的处理我是经历了一番曲折的,Typora默认粘贴进来的图片会放在内存中,如果笔记文件换个电脑看就看不到图片了;后来我通过Typora的设置把图片放到了固定的的assets文件夹下,这样图片就不会随着缓存被清而消失了,很方便在各个设备之间同步;但是随之带来的问题就是图片的大小,日积月累下来同步的文件夹会特别大。后来想到了图床(所谓图床就是云上的一块空间专门用来存储图片,当你上传完图片后会有一个链接,这个链接按照格式嵌入markdown就能展示这张图片了),如果将图片存入云服务器,然后对于我的文章来说,这张图片就是几十到上百个字符串而已,极大的节省了空间。

接下来就是痛苦的选型阶段,目前主流的图床有七牛云、SM.MS、ImgURL等等,但由于图床是一个需要长期使用的服务(换图床是一件痛苦的事情,尤其是图片越来越多的时候),所以尽量对数据有一定掌控性,这时候我想到了可以直接在Github、Gitee上直接建个仓库专门用来存图,虽然事后证明这是一个错误的决定,也正是此文产生的原因,但当时终于是搞定了。

还有另外一个问题悬而未决,使用图床的话意味着你每次在文章中插入图片,你都要打开图床网站,手动上传图片,然后复制链接,再到文章中插入,这样实在是太麻烦了,所幸Typora提供了插入图片时的一些定制化操作,然后照着网上的教程一步一步,终于实现了最终的样子 —— 在Typora中上传图片时,自动调用PicGo将图片上传到指定的图床并替换图片链接到文章。

在使用的过程中,逐渐发现了gitee的一些限制:图片不能大于1M、无法显示动图等等,然后我又使用SM.MS作为备用,然后终于有一天我发现所有的图片都不显示了,排查了一番发现要在所有的图片上都加上referrerpolicy="no-referrer"属性才可以,这意味着我大量的图片都需要去修改的结构,所以,为什么不能显示我也懒得排查了,直接换图床吧!

漫长的前情提要终于写完,由于之前折腾的时候没有做记录,这次就稍微记录下吧。

腾讯云COS

PicGo支持的图床很多,这次选型采用了腾讯云COS作为图床,主要基于以下考量:

  • 原本是想要用七牛云,但是需要绑定自己的备案域名;
  • 腾讯的服务至少比其他的小厂商要稳定的多,图床还是要稳定一点;
  • 腾讯目前收费还算便宜

登录腾讯云并完成注册、实名认证等一系列步骤后,在控制台选择对象存储并打开详情页面,选择“创建存储桶”。

image-20220327112126210

创建的时候注意访问权限选择“公有读私有写”,因为我们需要外链来访问图片。

image-20220327112333701

创建完成后我们就可以在存储桶中进行图片的上传了,可以上传一张测试以下外链是否能访问。

然后,我们需要创建一个子账号并且生成用于给PicGo上传图片的访问密钥,选择子账号是因为权限隔离,子账号只允许操作COS相关的数据。创建子账号需要进行授权,这里大家自行按照指引操作即可,授权的时候可以按照关键词搜索COS或者对象存储。

创建好账号后,我们使用子账号重新登录进控制台,第一次需要强制重置密码,然后点击菜单栏访问密钥 -> API密钥管理,选择新建密钥,然后系统会帮你生成一个APPID,一对密钥串(SecretId和SecretKey),记住这几个key。

image-20220327113514126

然后我们就可以配置PicGo了。

配置PicGo

PicGo是一款开源的,用于快速上传图片到图床并且获取链接的工具,支持七牛、腾讯、又拍、阿里云等多种图床,此外还支持各类第三方插件,比如额外的图床支持、图片自动压缩等等。对于更详细的介绍,可以移步中文官方网站查看,这里不再赘述。

如果需要使用三方插件,需要自行安装好node。

下面我们只需要配置腾讯云COS下面的相关配置即可。

image-20220327145408764

如上图所示,将子用户申请的密钥信息填入对应的框内,其中确认存储区域这里取的是你在创建存储桶时所选择的区域对应的代码,具体可以查看帮助文档中的详细说明。

保存后将其设置为默认图床即可。

此外,PicGo的其他丰富功能诸如上传前重命名、管理远程图片、自动压缩图片质量等等功能留待读者自行研究,官方文档已经有非常详尽的说明了。

配置Typora

接下来,我们要实现的是在Typora中粘贴图片时,自动将图片上传到腾讯云COS并将外链自动插入到图片,配置很简单,按照下图操作即可:

image-20220327150133538

至此,我们就实现了写文章时自动插入图床图片的功能。

如何更换图床?

前文说到我已经在gitee上上传了大量的图片,这些图片因为未知的原因已经无法显示了,于是这些图片也要切换到腾讯云COS上,我的做法是将gitee的仓库clone下来,然后把整个图片文件夹通过腾讯云控制台管理存储桶的页面上传上去,然后批量替换文章中的路径前缀,解决。

updatedupdated2023-06-032023-06-03
加载评论