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;
        //获取签名的token
        function 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 Uploader
        var 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,
            //最大100M
            fileSingleSizeLimit: 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插件，直接上传到百度云了。

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