自制小工具含源码——博客园图床ImageBed

CnblogsImageBed —— A place to store images

说明

俗话说:好记性不如烂笔头。工做中会遇到各类各样的需求,各类各样的任务,可能当时完成了,但过一段时间回头看发现连本身都不知道当初写的代码是啥意思。大脑是用来思考的,不是用来存储记忆的。因此要常常记录一下本身的想法,以避免过一段时间淡忘。git

我最喜欢的习做方式是简单的文本编辑器,加上简单的能够格式化文本的代码,再配上几张精美的图片效果就perfect了。Markdown好像天生就是为这个需求而生的,美中不足的是在Sublime Text或者Notepad++中写的时候插入配图须要提供url,也就是须要一个能够存储图片的、稳定的、能够提供图片外链的服务。寻寻觅觅,寻寻觅觅发现一些云存储厂商(如七牛云存储)提供限量的免费空间、每月限量的请求次数,要求很多,pass掉。github

天天使用频率最高的网站就是cnblogs博客园,使用博客园发布文章时发现上传图片功能很好用:chrome

  • 支持常见的多种图片格式
  • 上传速度快
  • 支持10M一下图片
  • 服务稳定(阿里云,分析Url用的貌似是又拍云存储图片服务)

惟一的缺点就是必需要求登陆,因而就萌生一个想法:作一个图片上传小工具。json

需求

目前基本功能是图片上传,而后得到图片的url地址。对,听起来就这么简单。windows

从技术角度来说,须要克服的难点:七牛云存储

  • Http抓包分析
  • 模拟登陆博客园
  • 代码实现图片上传

要作一个小工具,能在windows平台运行,首选用C#开发Winform Application,在宇宙最强IDE——Visual Studio的帮助下开发效率最高了。服务器

开发

开发详细过程就不写了,只写重点。编辑器

重点1:界面设计函数

UI

界面设计如图,左右2个panel,左边是登陆信息,登陆成功后跳转到右侧图片上传界面,登陆隐藏。工具

before login

登陆以前如上图,登陆成功以下图:

enter image description here

只要选择想要上传的图片,点击上传按钮,接着在下方文本框中就能获得想要的图片外链地址。

重点2:HTTP抓包分析

cnblogs-ui

这就是博客园图片上传主界面,上传一张图片用Http分析工具(用chrome develop tool就行,Fiddler有杀鸡用牛刀的感受)跟踪一下Http请求,找到最关键的一条:

analysize-http

请求的最终Url是:

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

项目结构

source-tree

涉及到:

  • 模拟Http请求,携带Cookie的Get和Post请求
  • 对服务器返回的json对象反序列化
  • 方法封装,一个函数只作一件事

最后

固然,这篇文章中的图片都是来自这个小工具哦~ :)

P.S. 但愿dudu看到了不会介意,毕竟这个小工具使用者很少,不会对博客园形成压力的 :)

update 2015-01-24

源代码托管在github上

相关文章
相关标签/搜索