七牛 php sdk 使用方法,七牛js-sdk教程

七牛云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

js部分

关于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中写入下面内容

选择文件

uptoken和domain

domain上面说过了，是你的七牛云生成的空间域名，一个域对应一个空间，有些坑后面再讲。

uptoken是一个签证，这个js脚本运行之后，main.js会异步去你指定的链接拿到uptoken的值

所以，关于这两个东西你得做三个事情：(我这么写不安全，自己发挥)

一是前端写入隐藏dom

二是写入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就行了