前面2篇，我们介绍了七牛云的客户端文件直传，客户端直传存在一个问题，就是上传凭证token在前端是暴露的，因此考虑采取通过业务服务器（自己家的服务器）代为上传文件。

整个上传流程

• 用户在前端选择要上传的文件，通过ajax调用业务服务器的上传接口

• 业务服务器将用户选择的文件，上传到七牛云服务器

• 七牛云反馈给业务服务器数据

• 业务服务器反馈给前端数据

我们知道，当用户通过post将form提交到业务服务器时，文件会被放置到服务器上的一个临时位置，此时就相当于客户将文件了一次，然后业务服务器再将该文件上传到七牛云，此时相当于又上传了一次，因此，通过后台上传实际上传了2次，时间肯定会大大加长。

前端html核心代码：

只有一个表单了，不需要token

<form  id="form1" >
    <input id="file" name="file" type="file" />
    <button id="submit" type="button">上传</button>
</form>

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

前端ajax核心代码：

var domain="http://yourdomain.clouddn.com/";

$("#submit").on('click',function(){
    var formdata=new FormData();
    formdata.append('file',$("#file")[0].files[0]);
    $.ajax({
        type:'post',
        url:'/api/qiniu/up',
        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);

        }

    });
});

后台php（YII框架）核心代码：

通过七牛云提供的php SDK，很简单的完成了上传

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

$bucket =qn_bucket;
$token= $auth->uploadToken($bucket);

$files=$_FILES['file'];
$filePath = $files['tmp_name'];

// 上传到七牛后保存的文件名
$key =md5(uniqid(md5(microtime(true)),true)).'.'.pathinfo($files['name'])['extension'];

// 初始化 UploadManager 对象并进行文件的上传。
$uploadMgr = new UploadManager();

// 调用 UploadManager 的 putFile 方法进行文件的上传。
list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);

if ($err !== null) {
    $return['code']=0;
    $return['message']="上传失败";
} else {
    $return['code']=1;
    $return['message']="上传成功";
    $return['key']=$ret['key'];
}

return $this->success($return);

我们前面猜想了，通过后台服务器上传，上传时间会加长，因此我也做了一个测试，记录用户点击时间date1，ajax上传成功时记录date2，然后找了一张1.9M的图片做上传测试，结果如下

我的服务器带宽比较小，因此效果对比就非常的明显了，