最近因为项目要用到七牛云，所以花了点时间整理了一下学习心得。

使用七牛云，第一步当然就是上传文件了，常见的云存储上传文件流程一般有3种：

用户==>业务服务器(你自己的服务器)==>云存储服务器

用户先把文件提交到你的服务器，然后你再转发给云存储，很明显，这样的方式相当于上传了2遍，势必会造成上传时间延长

用户==>七牛

用户直接把文件上传到七牛云，很明显，这种方式上传速度肯定比第一种快，今天我们主要学习这种上传方式

用户==>七牛==>业务服务器

如果设置了回调，七牛在上传完成后会将少量数据(如文件名)传给业务服务器

整个上传流程业务服务器颁发 上传凭证 给客户端

客户端通过 上传凭证，直接将文件上传到七牛云

七牛云返回上传结果

颁发上传凭证

因为用户要直接把文件上传到你的七牛云存储账户，所以一定要保证安全，否则别有用心的人利用你的七牛云存储他的文件，岂不是要浪费你的流量。

每个七牛用户会有accessKey和secretKey，我们利用七牛的SDK可以很容易的生成上传凭证token，我利用的是PHP版本的，框架用的YII框架。

$accessKey = '******';//换成你自己的

$secretKey = '******';//换成你自己的

$auth = new Auth($accessKey, $secretKey);

$bucket = 'test';// 要上传的七牛存储空间名称

$token= $auth->uploadToken($bucket);//将此token返回给你的用户

$this->_data['token']=$token;

return $this->render('up',$this->_data); //YII框架，将数据传给view

默认token有效期为3600秒，你也可以通过uploadToken()传递参数设置，具体参见SDK

客户端直接上传文件

客户端这边非常简单，通过form表单来上传数据，action不同的七牛云地区不一样，华南区，华北区等，不过不要担心，错误的时候会提示你正确地址是多少。设置一个隐藏字段name=token，值为上一步服务器返回的token

文件选择name设为file

上传之后会返回存储在七牛的文件名称，这样也说明上传成功了

">

上传

上传的更多设置

在第一步生成token的时候，七牛支持更多设置，比如，设置上传成功后返回的数据有哪些，上传成功后跳转的url地址，上传的文件名称等等$accessKey = '******';//换成你自己的

$secretKey = '******';//换成你自己的

$auth = new Auth($accessKey, $secretKey);

$bucket = 'test';// 要上传的七牛存储空间名称

//设置返回的数据内容

$returnBody=[

"key"=>"$(key)",   //$(key)是七牛提供的一些魔术变量

"imageInfo"=>"$(imageInfo.width)",

"bucket"=>"$(bucket)",

"myname"=>"liyulin"

];

$policy=[

"returnUrl"=>"http://baidu.com",//设置上传成功后的跳转地址

'saveKey'=>"$(fname)",

'returnBody'=>json_encode($returnBody),

];

$token= $auth->uploadToken($bucket,null,3600,$policy);

$this->_data['token']=$token;

return $this->render('up',$this->_data);

改为AJAX上传

我们一般上传图片，并不是通过提交整个form，而是先把图片通过ajax上传，然后获取图片的地址，并进行预览，因此将上面的form上传改为ajax上传

html代码：

">

上传

jquery代码：var domain="  //改为你的存储域名

$("#submit").on('click',function(){

var formdata=new FormData();

formdata.append('token',$("#token").val());

formdata.append('file',$("#file")[0].files[0]);

$.ajax({

type:'post',

url:'http://up-z0.qiniu.com',

data:formdata,

cache: false,

contentType:false,

processData: false,

dataType:"json",

error: function(request) {

alert(request.status);

},

success: function(data) {

$("#preview img").attr("src",domain+data.key);

}

});

});