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，

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

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

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

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

[js] view plain copy
Math.round(new Date().getTime() / 1000) + 3600;
就这么用吧，懒得去追究了。

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

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

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

[js] view plain copy
// 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。

加密
加密比较复杂，单独开一节来讲，请见下一节。
---------------------
作者：uikoo9
来源：CSDN
原文：https://blog.csdn.net/uikoo9/article/details/47924689
版权声明：本文为博主原创文章，转载请附上博文链接！

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

猜你喜欢