当前位置: 首页 > 工具软件 > qiniu-js-sdk > 使用案例 >

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

公冶兴文
2023-12-01

七牛云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就行了

 类似资料: