我用Electron作了一个图片上传的工具——PicGo

原文发表于个人博客

前言

做为一个比较经常使用markdown写文章、博客的人，在markdown里插入图片对我而言一直一个比较繁琐的活。之前每周写电影推荐的时候，我要在markdown里插入一张电影海报，我须要以下的操做：

1. 打开豆瓣的网站，选一张满意的海报，下载
2. 打开七牛的网站，登陆，点点点，找到上传，上传
3. 关闭上传窗口，找到地址，复制地址，再关闭七牛
4. 粘贴到markdown里

每次都须要繁琐的打开网页进行一些必要而枯燥的操做。这样很麻烦。在用过mac上一款很不错的小工具应用iPic后我很是喜欢它的简洁操做。不过它免费版本并不支持七牛图床。因此我就想着，能不能本身写一个相似的工具呢？结合本身的使用习惯再顺便加点功能。

因而我就开始本身的图片上传工具的开发了。它叫作PicGo。

技术选型

最先最先我想着用swift来写一个原生的应用，主要想着能作出体积友良、性能优秀的应用。不过鉴于swift迭代的太快，不少教程都已经不适合了。而且swift网上的教程对我这个小前端来讲着实要学的东西很多。我只是想作个方便本身的工具而已，一切以方便本身做为大前提。做为一个前端工程师，我决定采用electron来开发。同时由于我是Vue的粉丝，一并就使用了electron-vue做为个人electron开发脚手架。不得不说，electron-vue提供的脚手架作的真的很用心，并且我本身要作修改加配置什么的也很方便。往后作跨平台支持的话也比较容易。

需求分析

因为用过iPic，不少它的一些操做模式我以为特别值得借鉴。好比我想要个简单的拖拽就能实现上传，我想要可以上传我剪贴板的图片，我想要是实现上传成功后自动复制连接到剪贴板，这样我就能够直接编辑了。

那么这样一来，我编辑文章只须要以下操做：

• 找到要上传的图片，使用这个工具直接上传
• 上传成功后自动复制地址到剪贴板，在markdown里直接粘贴

一会儿省去了不少本来繁琐的操做！

功能展现

前先后后，用天天的闲暇时间从0开始学习electron框架，到Travis-ci构建出第一个可用的版本，大概花了一个月的时间。基本实现了我本身当初的目标，极大提高了我本身的文章写做体验。

操做演示

精致设计

macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的连接复制到剪贴板。

便捷管理

查看你的上传记录，重复使用更方便。支持点击图片大图查看。支持删除图片（仅本地记录），让界面更加干净。

可选图床

目前支持微博图床和七牛图床。将来将支持更多。方便不一样图床的上传需求。

多样连接

支持4种剪贴板连接格式，让你的文本编辑游刃有余。

后续工做

目前PicGo仍是一个很年轻的项目，bug确定是很多的，功能方面也有所欠缺。因此还须要不断地完善。我但愿你们在使用的过程当中有什么意见或者建议均可以在项目仓库里的issues里提出来~

• 目前暂不支持Windows和linux，将来将会逐步支持。
• 将来将支持更多的图床。若是可能，能够支持自定义的图床（只要设定好协议）
• 将集成系统服务，提供一键上传的全局快捷键
• 提高用户体验，修bug

最后

但愿这是一个可以提高你文章编辑体验的工具。若是你想学习electron开发，我也会在不久以后写几篇文章用于记录我是如何开发PicGo这个electron应用的。若是你喜欢它，欢迎给这个项目点个Star。另外，它是开源免费的，若是你以为它对你有所帮助，也能够考虑给我打赏一杯喝咖啡的钱~二维码在项目首页