我用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。另外，它是開源免費的，若是你以爲它對你有所幫助，也能夠考慮給我打賞一杯喝咖啡的錢~二維碼在項目首頁