web 端layui 上傳阿里雲oss

STS臨時授權訪問OSS:https://help.aliyun.com/document_detail/100624.html?spm=5176.11065259.1996646101.searchclickresult.537211faurHs2M

 

1、下載對應的獲取sts的SDKhttps://help.aliyun.com/document_detail/121136.html?spm=5176.10695662.1996646101.searchclickresult.69d57332iU8iJw，

其中config.json 

{
    
    "AccessKeyID" : "你的keyid",
    "AccessKeySecret" : "你的secreet",
    "RoleArn" : "acs:ram::你的:role/你的",
    "BucketName" : "你的",
    "Endpoint" : "oss-cn-beijing.aliyuncs.com",
    "TokenExpireTime" : "3600",
    "PolicyFile": "policy/bucket_read_write_policy.txt"
    }

AccessKeyID和AccessKeySecret獲取的方法

 

 

 

RoleArn獲取

 

配置Endpoint

https://help.aliyun.com/document_detail/34951.html?spm=5176.11065259.1996646101.searchclickresult.52ec2848H15pdh

 

接着配置policy/bucket_read_write_policy.txt

 

{
  "Statement": [
    {
      "Action": [
        "oss:GetObject",
        "oss:PutObject",
        "oss:DeleteObject",
        "oss:ListParts",
        "oss:AbortMultipartUpload",
        "oss:ListObjects"
      ],
      "Effect": "Allow",
      "Resource": ["acs:oss:*:*:你的bucket名稱/*", "acs:oss:*:*:你的backet名稱"]
    }
  ],
  "Version": "1"
}

 

以上兩個文件配置完成后就可以訪問sts文件獲取獲取臨時

AccessKeyId、AccessKeySecret、SecurityToken這三個參數

web上傳阿里雲oss文件

跨域設置
解決 JavaScript 的跨域訪問問題

 

 

 

 

對應前端sdk下載地址https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1465.175c347001mBJa

直接上js代碼

<script src="assets/dist/aliyun-oss-sdk.js"></script>
<script>
  $(function() {
/**
 * 表單驗證提交
 * @type {*}
 */
$('#my-form').superForm();
});


    layui.use(['form', 'upload', 'element'], function() {
        var $ = layui.jquery,
            upload = layui.upload;
        var element = layui.element;
        //拖拽上傳
        upload.render({
            elem: '#test10',
            auto: false,
            accept: 'video', //視頻
            exts: 'mp4', //
            choose: function(obj) {
                element.progress('js_upload_progress', '1%'); //設置頁面進度
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        anim: 2,
                        area: ['300px', '170px'],
                        shadeClose: false,
                        content: $("#uploadLoadingDiv").html(),
                        offset: '100px'
                    });
                obj.preview(function(index, file, result1) {
                    console.log(file.size); //得到文件對象
                    console.log(file.type); //得到文件對象
                    let storeAs = '<?= $file_name ?>' + '.mp4';//設置上傳的文件名
                    OSS.urllib.request("/sts-server/sts.php", {
                        method: 'GET'
                    }, (err, response) => {
                        if (err) {
                            return alert(err);
                        }
                        try {
                            result = JSON.parse(response);
                        } catch (e) {
                            return alert('parse sts response info error: ' + e.message);
                        }
                        let client = new OSS({
                            accessKeyId: result.AccessKeyId,
                            accessKeySecret: result.AccessKeySecret,
                            stsToken: result.SecurityToken,
                            // region表示您申請OSS服務所在的地域，例如oss-cn-hangzhou。
                            region: '<?= config('region') ?>',
                            bucket: '<?= config('bucket') ?>'
                        });
                        client.multipartUpload(storeAs, file, {
                            progress: function(p, checkpoint) {
                                console.log(p);//上傳進度監控
                                element.progress('js_upload_progress', p * 100 + '%');
                                if (p == 1) {
                                    layer.close(layer.index);
                                    layer.msg('上傳成功');
                                    $('#svideo').val(storeAs);
                                    $('#svideosize').val(file.size);
                                    $("input[name='file']").val('');//上傳成功后將文件input清空**
                                    layui.$('#uploadDemoView').removeClass('layui-hide').find('video').attr('src', 'http://'+'<?= config('bucket') ?>'+'.'+'<?= config('region') ?>'+'.aliyuncs.com/' + storeAs);
                                }
                            }
                        }).then(function(result) {
                            console.log(result);
                        }).catch(function(err) {
                            console.log(err);
                        });
                    });
                });

            }
        });



    });
</script>