jquery阿里云oss 分片上传

哪吒的狗腿子的个人博客 / 230 / 0 / 创建于 2年前 / 更新于 2年前

  <section class="content">
        <div class="form-group col-md-11">
            <p id="info-warning" style="line-height: 34px">
                <i class="fa fa-question-circle"></i>
                <span style="margin-left: 3px; font-weight: bold; color: red">上传视频仅支持mp4文件格式</span>
            </p>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <form class="form-horizontal" role="form" method="POST" action="" onsubmit="return false">
                        <div class="form-group">
                                <div id="up_wrap" class="col-md-7 col-md-offset-2"></div>
                        </div>
                        <div class="form-group" style="padding-top: 100px">
                            <label for="article" class="col-md-3 control-label">上传视频文件:</label>
                            <div class="col-md-9">
                                <label class="btn btn-primary" for="file">
                                    <input type="file" id="file" class="file" multiple="multiple" type="file" style="display:none"
                                           onchange="$('#upload-file-info').html(this.files[0].name)"   accept=".mp4">

                                    请选择视频文件
                                </label>
                                <span class='label label-info' id="upload-file-info"></span>
{{--                                <input type="file" id="file" class="file" multiple="multiple"  />--}}

                            </div>

                        </div>

                        <div class="form-group">
                            <div class="col-md-7 col-md-offset-3">
                                <input type="button" class="btn btn-primary" id="file-button" value="上传" />
                                <a href="" class="btn btn-primary btn-md">
                                    <i class="fa fa-plus-circle"></i>
                                    返回列表
                                </a>
                            </div>
                        </div>
                        <br/>
                    </form>

                    <table id="preview" class="table table-striped table-bordered dt-responsive nowrap"></table>
                </div>
            </div>
        </div>

    </section>

<script type="text/javascript">
    var appServer = '/xxx/xxx/xxx';//获取ststoken的接口，这边这个地址是我本地的。你们的接口地址自己应该清楚
    var bucket = 'xx-xx-xx
    var region = 'oss-accelerate';//前面新建bucket时选择过的。
    var uid = 'x';//用户标识。这个根据自己情况自己定
    var Buffer = OSS.Buffer;
    //获取授权STSToken，并初始化client
    var applyTokenDo = function (func) {
        var url = appServer;
        return $.get(url).then(function (res) {
            var creds = res.data.Credentials;
            var client = new OSS({
                region: region,
                accessKeyId: creds.AccessKeyId,
                accessKeySecret: creds.AccessKeySecret,
                stsToken: creds.SecurityToken,
                bucket: bucket
            });
            return func(client);
        });
    };

    //上传文件
    var uploadFile = function (client) {
        if (upfiles.length < 1)
            return;
        upfile = upfiles[0];
        var file = upfile.file;
        //key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
        var key = "/video/"+Date.parse(new Date())+upfile.name;
        var objkey = key;
        return client.multipartUpload(key, file, {
            progress: function (p, cpt, res) {
                if (cpt != undefined) {
                    var content = JSON.stringify(cpt);
                    client.put(objkey, new Buffer(content));
                }

                var bar = document.getElementById('progress-bar_' + upfile.num);
                bar.style.width = Math.floor(p * 100) + '%';
                bar.innerHTML = Math.floor(p * 100) + '%';

            }
        }).then(function (res) {


            console.log('upload success: ', res,key);
            upfiles.shift();
            $.ajax({
                url: '/xx/xxx/xxx?key='+key,
                type: 'get',
                dataType: 'json',
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (data) {
                    console.log(data);
                    if(data.errCode == 0) {
                        // toastr.success(data.errMsg);
                        // setTimeout(function () {
                        //     location.reload();
                        // }, 2000);

                    }else {
                        toastr.error(data.errMsg);
                    }
                },
                error: function (result) {
                    toastr.success('删除失败');
                }
            });

            // client.delete(objkey);
            applyTokenDo(uploadFile);

        }).catch(function(err) {
            console.log(err);
            error(err);
        });
    };

    //断点续传文件
    var reUploadFile = function (client) {
        if (upfiles.length < 1)
            return;
        upfile = upfiles[0];
        var file = upfile.file;
        //key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
        var key = upfile.name;
        var objkey = key;
        return client.get(objkey).then(function (res) {
            var data = JSON.parse(res.content);
            data.file = file;
            return client.multipartUpload(key, file, {
                checkpoint: data,
                progress: function (p, cpt, res) {
                    if (cpt != undefined) {
                        var content = JSON.stringify(cpt);
                        client.put(objkey, new Buffer(content));
                    }
                    var bar = document.getElementById('progress-bar_' + upfile.num);
                    bar.style.width = Math.floor(p * 100) + '%';
                    bar.innerHTML = Math.floor(p * 100) + '%';
                }
            }).then(function (ret) {
                console.log('upload success:', ret);
                upfiles.shift();
                // client.delete(objkey);
                // applyTokenDo(uploadFile);
            }).catch(function(err) {
                console.log(err);
                error(err);
            });
        });
    };

    function error(err){
        switch (err.status) {
            case 0:
                if (err.name == "cancel") { //手动点击暂停上传
                    return;
                }
                break;
            case -1: //请求错误，自动重新上传
                // 重新上传;
                return;
            case 203: //回调失败
                // 前端自己给后台回调;
                return;
            case 400:
                switch (err.code) {
                    case 'FilePartInterity': //文件Part已改变
                    case 'FilePartNotExist': //文件Part不存在
                    case 'FilePartState': //文件Part过时
                    case 'InvalidPart': //无效的Part
                    case 'InvalidPartOrder': //无效的part顺序
                    case 'InvalidArgument': //参数格式错误
                        // 清空断点;
                        // 重新上传;
                        return;
                    case 'InvalidBucketName': //无效的Bucket名字
                    case 'InvalidDigest': //无效的摘要
                    case 'InvalidEncryptionAlgorithmError': //指定的熵编码加密算法错误
                    case 'InvalidObjectName': //无效的Object名字
                    case 'InvalidPolicyDocument': //无效的Policy文档
                    case 'InvalidTargetBucketForLogging': //Logging操作中有无效的目标bucket
                    case 'MalformedXML': //XML格式非法
                    case 'RequestIsNotMultiPartContent': //Post请求content-type非法
                        // 重新授权;
                        // 继续上传;
                        return;
                    case 'RequestTimeout'://请求超时
                        // 重新上传;
                        return;
                }
                break;
            case 403: //授权无效，重新授权
            case 411: //缺少参数
            case 404: //Bucket/Object/Multipart Upload ID 不存在
                // 重新授权;
                // 继续上传;
                return;
            case 500: //OSS内部发生错误
                // 重新上传;
                return;
            default:
                break;
        }
    }
    //文件上传队列
    var upfiles = [];

    $(function () {
        //初始化文件上传队列
        $("#file").change(function (e) {
            $("#up_wrap").html('');

            upfiles = [] ;
            var ufiles = $(this).prop('files');
            var htm = "";
            for (var i = 0; i < ufiles.length; i++) {
                htm += "<dl><dt>" + ufiles[i].name + "</dt><dd><div class=\"progress\"><div id=\"progress-bar_" + i + "\" class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"min-width: 2em;\">0%</div></div></dd></dl>";
                upfiles.push({
                    num: i,
                    name: ufiles[i].name,
                    file: ufiles[i]
                })
            }
            $("#up_wrap").append(htm);

            var  obj=document.getElementById("file");
            obj.value=''  //FF下
            obj.select();   //IE下
            document.execCommand('Delete');
        });
        //上传
        $("#file-button").click(function () {
            applyTokenDo(uploadFile);
        });
        //续传
        $("#Continue-button").click(function () {
            applyTokenDo(reUploadFile);
        })
    })
</script>
```php

$config = [

        /*STS配置*/
        'sts' => [
            'AccessKeyID' => '',
            'AccessKeySecret' => '',
            'regionId' => '-',
            'endpoint' => 'sts.cn-beijing.aliyuncs.com',
            'roleArn' => '',  // 角色资源描述符，在RAM的控制台的资源详情页上可以获取
            'timeout' => '3600',  // 令牌过期时间
            'client_name' => 'client_name',  // setRoleSessionName可以不改
            // 在扮演角色(AssumeRole)时，可以附加一个授权策略，进一步限制角色的权限；
            // 详情请参考《RAM使用指南》
            // 这代表所有权限
            'policy' => [
                'Statement' => [
                    [
                        'Action' => ["oss:*"],
                        'Effect' => 'Allow',
                        'Resource' => ["acs:oss:*:*:*"],
                    ]
                ]
            ]
        ]
    ];
    $sts = new STSService($config);
    return  $sts->getToken();