七牛云js-sdk应用总结

:-}

基本思路

  1. 首先,整个七牛云sdk的思路是,先去服务器端拿uptoken,前段js来操作上传,后端部分这里采用php。
  2. js-sdk是依赖于plupload的,plupload是一个上传插件,所以应该下载的资源有,php-sdk,js-sdk以及plupload插件。另外,官网给的demo是基于bootstrap的,所以也要把bootstrap下载一下。
  3. 直接把官网给的demo跑通是最高效的熟悉方式。
  4. 将官网文档看一下,了解七牛云的工作流程以及代码。

准备工作和文件介绍

  1. 首先,你应该已经注册了七牛云的账号,进入‘对象存储’,创建了一个空间,会看到一个类似下面这样的域名
ogd29n56i.bkt.clouddn.com

在“个人面板”->“秘钥管理”应该也能看到你自己的秘钥对。

  1. 下载qiniu/php-sdk,js-sdk,plupload,bootstrap
  2. js-sdk中包含了官网的demo,在index.html中引入前面下载的资源,加载顺序要注意一下:
    css
<link rel="stylesheet" type="text/css" href="{{url('/qiniu/bootstrap/css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('/qiniu/js/highlight/highlight.css')}}">

js部分

<script type="text/javascript" src="{{url('/qiniu/js/jquery.js')}}"></script>

<script type="text/javascript" src="{{url('/qiniu/js/plupload/plupload.full.min.js')}}"></script>
<script type="text/javascript" src="{{url('/qiniu/js/plupload/i18n/zh_CN.js')}}"></script>
<script type="text/javascript" src="{{url('/qiniu/js/qiniu.js')}}"></script>
<script type="text/javascript" src="{{url('/qiniu/js/ui.js')}}"></script>
<script type="text/javascript" src="{{url('/qiniu/js/main.js')}}"></script>

关于js引入的顺序,plupload是基于jquery的,而七牛的sdk又是基于plupload的,所以应该先引入jquery再plupload,再qiniu.js,那么main.js和ui.js是什么呢?
main.js是云存储的初始化代码,就是七牛js-sdk官网文档的“上传”部分的代码。
在这部分代码中,有关于初始化的属性设置,例如:

var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'pickfiles',
        container: 'container',
        drop_element: 'container',
        max_file_size: '1000mb',
        flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
        dragdrop: true,
        chunk_size: '4mb',
        ......

也有回调函数和数据,例如

'BeforeUpload': function(up, file) {
                var progress = new FileProgress(file, 'fsUploadProgress');
                var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                if (up.runtime === 'html5' && chunk_size) {
                    progress.setChunkProgess(chunk_size);
                }
            },

上面这个函数定义了上传开始之前的动作,括号内的up和file是两个对象,里面包含了关于在上传这个文件的所有信息,可以将他们打印出来看看。
同样的,也有上传中,上传完成后等等回调函数。那么在这些函数中经常会进行一些DOM操作,本例中,将这些DOM操作都封装在ui.js中。好了,这几个文件介绍好之后,现在开始正式看看,七牛云是怎样工作的。

具体操作流程

因为整个流程是围绕main.js展开的,我们就按照这个文件来展开介绍七牛云上传的所有细节。我们只说几个核心的点,其他的看文档就行了。

  1. 文件上传按钮
var uploader = Qiniu.uploader({
            runtimes: 'html5,flash,html4',
            browse_button: 'pickfiles',
            container: 'container',
            ...

browse_button,container后面的值对应了页面中两个元素的id值,并且container应该包含pickfiles,所以在html中写入下面内容

<div id="container">
       <button id="pickfiles">选择文件</button>
</div>
  1. uptoken和domain

domain上面说过了,是你的七牛云生成的空间域名,一个域对应一个空间,有些坑后面再讲。
uptoken是一个签证,这个js脚本运行之后,main.js会异步去你指定的链接拿到uptoken的值
所以,关于这两个东西你得做三个事情:(我这么写不安全,自己发挥)

一是前端写入隐藏dom

<input type="hidden" id="domain" value="http://ogd29n56i.bkt.clouddn.com/">
<input type="hidden" id="uptoken_url" value="{{url('getuptoken')}}">

二是写入main.js

uptoken_url: $('#uptoken_url').val(),
domain: $('#domain').val(),

第三步就是写好获取uptoken的php程序,这部分也比较简单,可以参考官方php文档,附上代码:

public function getUptoken()
    {
        // 需要填写你的 Access Key 和 Secret Key
        $accessKey = 'VsAP-hK_hVPKiq5CQcoxWNhBT9ZpZ1Ii4z3O_W51';
        $secretKey = '5dqfmvL15DFoAK1QzaVF2TwVzwJllOF8K4Puf1Po';

        // 构建鉴权对象
        $auth = new Auth($accessKey, $secretKey);

        // 要上传的空间
        $bucket = 'jacklin';

        // 生成上传 Token
        $token = $auth->uploadToken($bucket);
        $res = array('uptoken'=>$token);
        return response()->json($res);
    }

3.到目前为止,上传功能已经可以实现了,其他的设置你也需要看一下,比如方便的设置文件大小上限,哪几个不能同时设置之类的。

4.上文有说过,js版本的sdk结合了plupload这个上传插件,所以还有很多便利的地方。那就是main.js下面的部分。

'FilesAdded': function(up, files) {}
'BeforeUpload': function(up, file) {}
'UploadProgress': function(up, file) {}
'UploadComplete': function() {}
'FileUploaded': function(up, file, info) {}
'Error': function(up, err, errTip) {}
'Key': function(up, file) {}

先大概了解一下这几个函数,这里的用法类似jQ的ajax,这些是回调函数和参数,其中的up,files,info里面包含了关于这个文件所有的信息,
包括文件类型,大小,成功后的链接等等,所以可以用这些信息做一些DOM操作,首先前端的展示和必要的数据获取。如果你想查看这些对象里面
的内容咋办呢?

for(i in json){
    console.log(i);
    console.log(json[i]);
}

5 下面详细讲解这几个函数

'FilesAdded': function(up, files) {
    //这里定义文件加入上传队列,但是还没有开始上传的动作
    //七牛jssdk是多文件上传的,你可以试试上传的时候Ctrl添加多个文件试试
    //第一个在加载的时候其他的文件的状态就是FilesAdded
},
'BeforeUpload': function(up, file) {
    //这里自定义了上传前的动作,上传前就是马上就要开始上传的临界点
},
'UploadProgress': function(up, file) {
    //这里自定义上传中的动作,这个地方就比较有意思了,只要文件上传没有完成
    //这个函数就不断回调,你可以写一个alert(1)试试,文件上传中,就不断的弹弹弹
}
'UploadComplete': function() {
    //这里自定义上传完成时的动作
},
'FileUploaded': function(up, file, info) {
    //这里定义了文件完成后的动作,可能你上传成功时通过ajax把url写进数据库
    //就可以把ajax写在这里,从info对象里获取到url
}
'Error': function(up, err, errTip) {
    //这里定义出现错误时的动作
}
'Key': function(up, file) {
    //这里也是一个关键的地方,如果你想自己定义文件名,就在这里组织,并 return key;
    // 但是前提是你已经把 unique_names save_key 注释了,我这里是加了一个时间戳
    //这里是我定义的key,其实就是字符串拼接,如果你喜欢,return '123' 都可以
        var extarr = file['name'].split('.');
        if(extarr.length===1){
            var arr=file['type'].split('/');
            var prename = extarr[0];
            var ext = (arr[arr.length-1]=='undefined')?'':arr[arr.length-1];
        }else{
            var ext = '.'+ extarr[extarr.length-1]; //得到后缀
            var index = file['name'].lastIndexOf('.');//得到最后一个点的坐标
            var prename = file['name'].substring(0,index);//得到最后一个点之前的字符串
        }
        var time = Date.parse(new Date())/1000;
        $("input[name='ftype']").val(prename);
        var key = prename+'/'+time+ ext;
        return key;
}

6 .到现在整个流程已经讲完了,下面讲这个ui.js,你打开这个文件可能吓一跳,哇塞,js面向对象,各种成员属性方法的,
其实ui.js是官网demo的dom操作,没有这个js,官网这个demo能上传文件,但是,你啥都看不到,他就是用了上面所说up,
files,info几个对象里面的信息结合了几个过程,展示出了一些信息。它定义了一个FileProgress对象,而这个对象是初始化了
一个dom元素作为他的容器,你看一下他大概的用法,稍微了解一下up,files,info这几个对象就可以自己写了,不过,可是,
这个demo有关于缩略图和大文件分块上传进度展示的功能还是很复杂的。如果你说着我也会写,那你试试。

##坑

#####400:token not specified

出现这个情况,说明你离成功还很远

1.检查你的token格式是不是跟官网的一样

2.我还遇到一个更坑的情况,浪费了很多时间,那就是电脑差,资源加载的慢,js还没有完全加载好,我就点击上传,也报这个错,所以,你得排除这个可能,那就是–等

#####400:incorrect zone ,please use up-z1.qiniu.com
这个问题是由于,你创建空间时候,手贱点了华北地区,七牛每个服务域名服务的地区是规定好的,所以有两个办法

  1. 换空间: 重新建一个空间 我选华东的,就OK了
  2. 换域名: 打开qiniu.js 搜索 qiniuUploadUrls,修改成如下
var qiniuUploadUrls = [
    'http://upload-z1.qiniu.com',
    'http://up-z1.qiniu.com'
]

##最后
其他的自定义设置可以参考官方文档,下面附上一些常用的设置

1 设置一次只能选一个文件

multi_selection: false

2 取消分片 注意,最大分片也只是4M

chunk_size: ‘0mb’

3 取消自动上传

auto_start: false 

4 暂停上传,开始上传

//加入下面dom和js代码   
$('#up_load2').on('click', function(){
    uploader2.start();
 });
 $('#stop_load2').on('click', function(){
    uploader2.stop();
 });

5 多个上传按钮问题,实例化多个main.js就行了

七牛云首页
js-sdk