原文發表於我的部落格
前言
作為一個比較常用markdown寫文章、部落格的人，在markdown裡插入圖片對我而言一直一個比較繁瑣的活。以前每週寫電影推薦的時候，我要在markdown裡插入一張電影海報，我需要如下的操作：
- 開啟豆瓣的網站，選一張滿意的海報，下載
- 開啟七牛的網站，登入，點點點，找到上傳，上傳
- 關閉上傳視窗，找到地址，複製地址，再關閉七牛
- 貼上到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。另外，它是開源免費的，如果你覺得它對你有所幫助，也可以考慮給我打賞一杯喝咖啡的錢~二維碼在專案首頁