DIY七牛前端上传

我们的项目中有大量的图片上传和展示。我们选了七牛作为CDN。这其中一个比较重要的原因是因为qiniu支持前端直接上传。动辄4-5MB的图片不用到我们的app server转一圈还是很好的。为了支持前端上传，qiniu提供了javascript SDK。但是我看了看代码。实在是太大了。7000多行javascript啊。真的有必要吗？有必要吗？有必要吗？遂决定DIY一个。讲真，qiniu提供各种各样SDK。并不推荐直接用REST API来上传。关于API的调用也比较简单。所以还是费了一点力气。因有此文。

像任何事情一样，搞定之后觉得其实蛮简单的。同样像任何事情一样，理解了big picture就会好办多了。

qiniu为了支持大文件，允许用户将文件分块(block)上传。再所有的文件块上传完成之后，再将所有块组成一个完整的文件 - 至少逻辑上是如此。物理存储如何只有qiniu自己晓得。

我们以一个2.5MB的文件为例。将文件分成3个block上传。blockSize设为1MB。需要做如下的操作：

1. 上传block 1。qiniu服务器返回一个ctx来标识这个block。例如abcd

2. 上传block 2。qiniu服务器返回一个ctx来标识这个block。例如efgh

3. 上传block 3。qiniu服务器返回一个ctx来标识这个block。例如ijk

4. 告诉qiniu服务器这个新文件是有abcd, efgh 和 ijk 三个block组成。并给出key。就可以生成文件了。

具体到API的话，是这样：

1. POST /mkblk/1048576 上传起始的1MB文件内容。服务器返回ctx以及其它内容。

2. POST /mkblk/1048576 上传中间的1MB文件内容。服务器返回ctx以及其它内容。

3. POST /mkblk/524288 上传最后的0.5MB文件内容。服务器返回ctx已经其它内容。

4. POST /mkfile/2621440/key/<key>。创建文件。在POST的body中将上面的三个ctx依次列出并以逗号分开。这样文件就产生了。如上例，POST的body的内容应为：abcd,efgh,ijk

最后补充两点：

1. 文件内容的读取，以及各个步骤之间的衔接是通过plupload来完成的。这个和官方的SDK也一致。但是代码量要少的多。

2. qiniu在block内部还可以分chunk上传。只要用/bput API并指定ctx即可。因为有点复杂而且没有什么特别的需求（也许是为了超大文件吧），所以没有采用。