上传Markdown文件内的本地图片至博客园

梦想与她 提交于 2020-05-05 12:01:20

上传Markdown文件内的本地图片至博客园

​ 因为习惯使用Markdown格式做笔记,有时希望将它放到网上方便在任何有网络的地方查找。开始是放到Github中的,但是有时访问的速度太慢了所以准备将笔记放到博客园中,这样访问速度就快了。

​ 但是使用Markdown写的文件中时不时会有几张图片,上传笔记的时候还要一个一个的去本地找照片,再上传到博客园上。如果说一两张图片还好,但是图片多了,这样重复无聊的动作就会让人烦躁,因此便产生了编写能自动上传Markdown中的本地图片,并自动改掉文章中的链接的程序的想法

​ 上传图片需要账号信息,但只知道账号密码没啥用,因为不知道上传图片的API接口,而偶然的机会知道了Electron,它可以用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

​ 也就是说只要用Eletron编写的程序,然后用它登录账号,程序就能存储其session,再使用ajax上传图片,这样就能自动附带上用户的session,然后就能上传图片了。额大概就这意思,反正我是这么理解的,使用说明如下

程序界面

程序界面如下,仿照PS做的

image-20200219175009941

登陆账号

然后登录一下账号,这个是加载博客园的登录页面的,绝对放心,不会盗取密码的。

image-20200219175225531

拖拽MD文件

把md文件拖到左边虚线框内

image-20200219175644453

拖拽图片文件

找到存放图片的位置,ctrl+a全部复制,不管图片是不是在文章中引用过,程序会自动剔除多余的图片。要注意的是这个是根据正则表达式判断的,我只写了![]()类型的,还有种格式<img src>大概长这样的类型并没用考虑。底下有可上传图片的数量,左边虚线框有图片的样子,可以判断上传是否有误。

image-20200219175919787

还有需要注意的地方,图片的位置只能是相对路径,否则不能上传成功。如果你使用的是Typora文本编辑器的话可以在偏好设置里调节,为保证成功上传,设置成如下图所示就行了。这样当我们拖动一个文件到Typora文本编辑器里时,软件会自动复制图像到指定的相对路径中。

image-20200315152828882

解析上传

最后点击解析上传就行,程序会将本地地址替换为链接,并输出为一个副本,不用担心对之前的文本有损伤

演示

GIF

image-20200219181905440

成功后会产生一个副本,不会对之前的笔记产生影响,现在对比一下内容

image-20200219182217527

链接就被替换掉了。

然后将整个文章复制,粘贴到博客园笔记编写处,就行了

还有使用这个软件登录账号好像会挤掉你自己在浏览器中登录的账号,所以方便点,当你解析好自己的笔记后,再点击一下登录账号按钮,这时他会提醒你已近登录过了

image-20200219182819549

然后返回就行,这时就会回到博客园首页,在这里同样可以上传自己的笔记

image-20200219182841932

源码与程序

程序蓝奏云链接:https://www.lanzous.com/i9hs2ub

源码Github地址:https://github.com/HeMOua/cnblogsUpload

若有发现bug的道友可以留言提醒我一下,感谢

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!