自制小工具含源碼——博客園圖牀ImageBed

CnblogsImageBed —— A place to store images

說明

俗話說：好記性不如爛筆頭。工做中會遇到各類各樣的需求，各類各樣的任務，可能當時完成了，但過一段時間回頭看發現連本身都不知道當初寫的代碼是啥意思。大腦是用來思考的，不是用來存儲記憶的。因此要常常記錄一下本身的想法，以避免過一段時間淡忘。

我最喜歡的習做方式是簡單的文本編輯器，加上簡單的能夠格式化文本的代碼，再配上幾張精美的圖片效果就perfect了。Markdown好像天生就是爲這個需求而生的，美中不足的是在Sublime Text或者Notepad++中寫的時候插入配圖須要提供url，也就是須要一個能夠存儲圖片的、穩定的、能夠提供圖片外鏈的服務。尋尋覓覓，尋尋覓覓發現一些雲存儲廠商（如七牛雲存儲）提供限量的免費空間、每月限量的請求次數，要求很多，pass掉。

天天使用頻率最高的網站就是cnblogs博客園，使用博客園發佈文章時發現上傳圖片功能很好用：

• 支持常見的多種圖片格式
• 上傳速度快
• 支持10M一下圖片
• 服務穩定（阿里雲，分析Url用的貌似是又拍雲存儲圖片服務）

惟一的缺點就是必需要求登陸，因而就萌生一個想法：作一個圖片上傳小工具。

需求

目前基本功能是圖片上傳，而後得到圖片的url地址。對，聽起來就這麼簡單。

從技術角度來說，須要克服的難點：

• Http抓包分析
• 模擬登陸博客園
• 代碼實現圖片上傳

要作一個小工具，能在windows平臺運行，首選用C#開發Winform Application，在宇宙最強IDE——Visual Studio的幫助下開發效率最高了。

開發

開發詳細過程就不寫了，只寫重點。

重點1：界面設計

界面設計如圖，左右2個panel，左邊是登陸信息，登陸成功後跳轉到右側圖片上傳界面，登陸隱藏。

登陸以前如上圖，登陸成功以下圖：

只要選擇想要上傳的圖片，點擊上傳按鈕，接着在下方文本框中就能獲得想要的圖片外鏈地址。

重點2：HTTP抓包分析

這就是博客園圖片上傳主界面，上傳一張圖片用Http分析工具（用chrome develop tool就行，Fiddler有殺雞用牛刀的感受）跟蹤一下Http請求，找到最關鍵的一條：

請求的最終Url是：

http://upload.cnblogs.com/imageuploader/processupload?host={0}&qqfile={1}

項目結構

涉及到：

• 模擬Http請求，攜帶Cookie的Get和Post請求
• 對服務器返回的json對象反序列化
• 方法封裝，一個函數只作一件事

最後

固然，這篇文章中的圖片都是來自這個小工具哦~ ：）

P.S. 但願dudu看到了不會介意，畢竟這個小工具使用者很少，不會對博客園形成壓力的 ：）

update 2015-01-24

源代碼託管在github上