七牛云js-sdk应用总结
基本思路
- 首先，整个七牛云sdk的思路是，先去服务器端拿uptoken，前段js来操作上传，后端部分这里采用php。
- js-sdk是依赖于plupload的，plupload是一个上传插件，所以应该下载的资源有，php-sdk,js-sdk以及plupload插件。另外,官网给的demo是基于bootstrap的，所以也要把bootstrap下载一下。
- 直接把官网给的demo跑通是最高效的熟悉方式。
- 将官网文档看一下，了解七牛云的工作流程以及代码。
准备工作和文件介绍
- 首先，你应该已经注册了七牛云的账号，进入‘对象存储’，创建了一个空间，会看到一个类似下面这样的域名
ogd29n56i.bkt.clouddn.com
在“个人面板”->“秘钥管理”应该也能看到你自己的秘钥对。
- 下载qiniu/php-sdk,js-sdk,plupload,bootstrap
- 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展开的，我们就按照这个文件来展开介绍七牛云上传的所有细节。我们只说几个核心的点，其他的看文档就行了。
- 文件上传按钮
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>
- 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
这个问题是由于，你创建空间时候，手贱点了华北地区，七牛每个服务域名服务的地区是规定好的，所以有两个办法
- 换空间: 重新建一个空间 我选华东的，就OK了
- 换域名: 打开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就行了
