Hbuilder开发app实战-识岁04-七牛云上传文件的js实现

前言

不得不说自从所谓的“云”概念开始，多多稍稍还是给生活带来了一些改变，

其中对开发者影响比较大的就是各种云平台和云存储，云存储中我比较推荐七牛云。

七牛云上传

七牛云的上传支持很多种语言，我用过的有java和js，个人感觉都比较方便，

当然java要比js方便一点吧，由于是app中要上传到七牛云，所以不可能使用java，

就看拉看七牛云的js上传，详见这里：http://developer.qiniu.com/docs/v6/api/overview/up/form-upload.html，

这种文档一向是不想读的，没有demo，读起来费劲，而且遗漏一两个细节得查找好半天。

简单的来说就是给普通的上传表单添加一些字段，其中包括自己生成的uptoken。

上传凭证

这个上传表单中最重要的就是上传凭证uptoken的生成，见官网说明：

http://developer.qiniu.com/docs/v6/api/reference/security/upload-token.html，

简单的说明下过程：构建js对象，转json，一系列编码。

首先来说下构建js对象，见下图：



需要构建的就是这样一个js对象，但是官方说明太简单了，其中有好多坑的。

第一个坑，scope，

这个属性是由你的七牛云bucket名称和文件名称组成的，

官方还说如果不想定义具体的文件名称可以设置bucket名称，

这就是一个坑，为啥呢？

如果只设置bucket的话，那会自动生成一个没有文件后缀的地址，

例如正常的访问地址是：http://qiniu.com/xxx.png，

那么这时候生成的地址就是：http://qiniu.com/xxxxxx，

是没有后缀的，

虽然这样访问也可以正确显示图片，

但是坑来了，face++不能识别，因为face++做了后缀判断，

我相信也会有很多地方都做后缀判断吧，

所以还是怪怪的加上文件名称吧。

第二个坑，deadline，

官网只说了截止时间，一看就是毫秒数，

但是你用各种工具生成毫秒数，你都会发现比官网提供的数字要多三位，

这是为什么呢？为什么呢？太坑了，官网毫无提示。

最后实在官网的一个校验工具中找到的：

Math.round(new Date().getTime() / 1000) + 3600;

就这么用吧，懒得去追究了。

封装方法

搞明白了以上两点，那接下来就好走多了，或者说相对好走多了，

接下来就是js对象转json，还有base64编码，url安全的base64编码，SHA1加密，HMAC-SHA1加密。

加密和密码切不论，来看看整体的封装：

// qiniu
qiao.qiniu = {
ak : '3YhXI8s0TsYLyEv_irq7aKGsQsmN6i3WoERBtnyY',
sk : '9lWh6588LIrQcrMpTagR0f19KV_BcRvtgu5Z1mFU',
pr : 'http://7xl3r9.com1.z0.glb.clouddn.com/',
scope : 'uikoo9-facepp',
};
qiao.qiniu.deadline = function(){
return Math.round(new Date().getTime() / 1000) + 3600;
};
qiao.qiniu.genScope = function(src){
var scope = qiao.qiniu.scope;
if(src){
var ss = src.split('.');
qiao.qiniu.file = qiao.qiniu.uid() + '.' + ss[ss.length - 1];
scope = scope + ':' + qiao.qiniu.file;
}

return scope;
};
qiao.qiniu.uid = function(){
return Math.floor(Math.random()*100000000+10000000).toString();
};
qiao.qiniu.uptoken = function(src) {
//SETP 1
var putPolicy = '{"scope":"' + qiao.qiniu.genScope(src) + '","deadline":' + qiao.qiniu.deadline() + '}';

//SETP 2
var encoded = qiao.encode.base64encode(qiao.encode.utf16to8(putPolicy));

//SETP 3
var hash = CryptoJS.HmacSHA1(encoded, qiao.qiniu.sk);
var encoded_signed = hash.toString(CryptoJS.enc.Base64);

//SETP 5
var upload_token = qiao.qiniu.ak + ":" + qiao.encode.safe64(encoded_signed) + ":" + encoded;
return upload_token;
};
qiao.qiniu.url = function(key){
return qiao.qiniu.pr + qiao.qiniu.file;
};

qiao.qiniu是初始化信息，包括你七牛云的ak，sk，地址，bucket名称，

qiao.qiniu.deadline就是之前说的截止时间，

qiao.qiniu.uid是获取一个uuid，因为你要传文件名，而你不可能用用户的文件名，如果两个用户都上传1.png你该怎么办？

qiao.qiniu.genScope是生成js对象中的scope属性，原因之前已经说过了，由于文件名之后还要用，所以保存到了qiao.qiniu.file中，

qiao.qiniu.uptoken就是官网告诉你的几个步骤，包括转json，base64，和sha1加密。

最后恭喜你，你总算得到了一个正确的uptoken。

加密

加密比较复杂，单独开一节来讲，请见下一节。

更多教程：

Hbuilder开发App实战1-识岁：http://uikoo9.com/book/detail/5

更多学习笔记：http://uikoo9.com/book