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

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

• 用户==>业务服务器（你自己的服务器）==>云存储服务器

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

• 用户==>七牛

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

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

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

  
  

整个上传流程

1. 业务服务器颁发 上传凭证 给客户端

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

3. 七牛云返回上传结果

颁发上传凭证

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

每个七牛用户会有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

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

<form method="post" action="http://up-z0.qiniu.com" enctype="multipart/form-data">
    <input name="token" type="hidden" value="<?=$token?>">
    <input name="file" type="file" />
    <button type="submit">上传</button>
</form>

上传的更多设置

在第一步生成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代码：

<form  id="form1" >
    <input id="token" name="token" type="hidden" value="<?=$token?>">
    <input id="file" name="file" type="file" />
    <button id="submit" type="button">上传</button>
</form>

<div id="preview">
    <img src="">
</div>

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);
        }

    });
});