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

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

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

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

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

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

前端html核心代码：

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

上传

前端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的图片做上传测试，结果如下

客户端直传通过服务器代传

第一次376ms13716ms

第二次379ms14051ms

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

七牛文件上传优点缺点应用场景

客户端直传速度快暴露了token，可能会被人利用，有安全风险如果产品供内部人员使用，如管理后台，且上传一些大文件，如视频管理，我会选用此方案

业务服务器代传不会暴露token，比较安全速度慢如果产品给用户使用，上传的是图片一类小文件，可以选择此类方式