webuploader直接上传文件到百度云BOS中

最近在用百度云的文件存储Bos 和百度云的加速CDN。

参考了一下官方的web直传实战，一共介绍了好几种方法，但是文档都过于朦胧了。自己就翻译了一下Php的Sdk 源码，整理了下一年百度云bos的最简单的直传方式。

我这里用到的开发软件环境如下：

1.ThinkPhp5.1版本的

2.webuploader上传插件

现在我们就一步一步实现，bos的最简单的直传方式。

一：设置Bos的跨域。

如下图，例如我们要用的的域名是“https://video.baidu.com”，那么我们就在这里添加规则，加入就可以了

二：Thinkphp5.1.23后端代码

1、配置config文件

我们在config里面新建一个文件，名称叫：sdk.php，然后填入自己的配置如下

2、生成签名和policy

我们在index模块的controller中，新建一个类叫Bce.php

/*** 百度云BCE操作* Class Bce* @package app\v1\controller*/
class Bce
{public function token(){//获取配置信息$bceConf = Config::get('sdk.bce');//生成当前时间戳$expiration = date("Y-m-d\TH:i:s\Z", time());//生成文件名称$fileName = 'video/' . time() .'_' . unique();//生成policy的配置$policyConf = ['expiration' => $expiration,'conditions' => [//要上传到的bucket['bucket' => $bceConf['video_bucket']],//要存为的文件名称['key' => $fileName]]];//将policy先json序列化后再base64$policy = base64_encode(json_encode($policyConf));//生成签名验证信息$signature = hash_hmac('sha256', $policy, $bceConf['sk']);//返回签名好的信息return array('accessKey' => $bceConf['ak'],'policy' => $policy,'signature' => $signature,'key' => $fileName);}
}

上面的代码就可以返回bos上传时候需要的签名了，接下来。我们来写前端的页面

三：前端页面直传

Html

html代码部分，可以参考webuploader官网案例

http://fex.baidu.com/webuploader/getting-started.html#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0

如下：

<div id="uploader-demo"><!--用来存放item--><div id="fileList" class="uploader-list"></div><div id="filePicker">选择图片</div>
</div>

Javascript

<script src="webuploader/webuploader.min.js"></script>
<script type="text/javascript">var tokenData;//获取签名的tokenfunction getToken() {$.ajax({url: "{:url('index/bce/token')}",dataType: "json",type: 'post',data: {},success: function (data) {if (data.code != 10000) {tokenData = data;console.log('---uploadBeforeSend has data----')}}});}getToken();// 初始化Web Uploadervar uploader = WebUploader.create({// 选完文件后，是否自动上传。auto: true,// swf文件路径swf: '__JS__/webuploader/Uploader.swf',// 文件接收服务端，设置成自己的bucket域名。server: 'https://*.gz.bcebos.com',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#filePicker',// 只允许选择视频文件。accept: {title: 'Videos',extensions: 'mp4,avi,mov,mkv',mimeTypes: 'video/*'},//只允许单个上传fileNumLimit: 1,//最大100MfileSingleSizeLimit: 100 * 1024 * 1024,// 不压缩！resize: false});uploader.on("uploadStart", function (file) {//如果没有获取到签名，说明没有登录上去,跳转到自己的登录页面if (tokenData == undefined) {window.location.href = "{:url('index/user/login')}"}uploader.options.formData = tokenData});// 文件上传过程中创建进度条实时显示。uploader.on('uploadProgress', function (file, percentage) {});// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on('uploadSuccess', function (file, ret) {console.log(ret)});//不管成功或者失败，文件上传完成时触发uploader.on('uploadComplete', function (file) {uploader.reset();})// 文件上传失败，显示上传出错。uploader.on('uploadError', function (file, ret) {alert('文件上传失败，请稍后重试');});/*** 验证文件格式以及文件大小*/uploader.on("error", function (type) {if (type == "Q_TYPE_DENIED") {return alert("请上传mp4、avi、mov、mkv的文件")} else if (type == "F_EXCEED_SIZE") {return alert("文件大小不能超过100M")}});</script>

这样，就可以实现了webuploader插件，直接上传到百度云了。

更多的功能如，断点续传、分片上传，留给大家自己去研究了。