jquery阿里雲oss 分片上傳

哪吒的狗腿子發表於2021-11-03
jQuery阿里
  <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();
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章