阿里云 STS授权方式访问OSS对象存储

最新推荐文章于 2023-07-03 17:53:32 发布

Rody杰

最新推荐文章于 2023-07-03 17:53:32 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44107914/article/details/104577136

版权

STS授权方式访问OSS对象存储

记录原由：新手，首次使用阿里OSS，供同样是新手的人群，快速实现通过STS授权方式实现上传文件到OSS。

需求

前端使用JS，直传阿里OSS服务器，秘钥相关参数，由自己应用服务器临时生成，且使用STS授权方式；

资源地址

前端资源：https://github.com/ali-sdk/ali-oss/tree/master/dist
来源页面：https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1310.7a074947K6tLj1
PHP后端资源：http://gosspublic.alicdn.com/doc31920servercode/sts-server.zip?+ spm=a2c4g.11186623.2.22.7a074947K6tLj1&file=sts-server.zip
来源页面：https://help.aliyun.com/document_detail/31920.html?spm=a2c4g.11186623.6.1517.57925966rElpM8

两个资源的使用方式，具体见来源页面，代码概述如下：

PHP后端：

后端资源，下载下来，解压后，配置好两个文件：

config.json 文件，这个文件中主要用来记录自己账号的相关信息；
/policy目录下，两个授权政策文件，需要修改"Resource"字段；一个控制读，一个控制写。更改配置，用于实现精确权限控制。（配置说明链接 https://help.aliyun.com/document_detail/31921.html?spm=a2c4g.11186623.2.27.269d4947QWMcWz#concept-i1m-lvx-5db）

web前端：

前端资源，下载下来之后，引入即可使用使用，使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>图片上传</title>
    <link rel="stylesheet" type="text/css" href="--------statics/oss/style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div style="text-align:center;">
    <img src='--------------' style="width:300px;height:300px;"/>
</div>
<input id="file-selector" type="file" multiple="multiple" accept="image/jpeg,image/jpg,,image/png" />
<div id="container" >
    <a id="my" href="javascript:void(0);" class='btn'>确定上传</a>
</div>
<pre id="console"></pre>
<p>&nbsp;</p>
</body>
<script src="-------------------statics/oss/aliyun-oss-sdk.min.js"></script>
<script src="-------------------statics/jq/jquery-3.3.1.js"></script>
<script src="-------------------statics/layer/layer.js"></script>
<script>
    $('#file-selector').change(function () {
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("img");
        if (fileObj && fileObj.files && fileObj.files[0]) {
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            $img.attr('src', dataURL);
        } else {
            dataURL = $file.val();
            var imgObj = document.getElementById("preview");
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
        }
    });
</script>
<script>
    $(document).ready(function () {
        // $("#file-selector").change(function () {
        //     console.log($("#file-selector")[0].files);
        // });
        $("#my").click(function () {
            $.ajax({
                type: "POST",
                url: "/sts-server/sts.php",//后端鉴权地址
                data: {},
                dataType: "json",
                success: function (data) {
                    //获取到后端STS鉴权后的回调
                    let client = new OSS.Wrapper({
                        region: 'oss-cn-shenzhen',
                        accessKeyId: data.AccessKeyId,
                        accessKeySecret: data.AccessKeySecret,
                        stsToken: data.SecurityToken,
                        bucket: 'zmerp'
                    });
                    var file = $("#file-selector")[0].files[0];
                    if(file.size > 1024 * 1024 * 2) {
                        layer.msg('图片大小不能超过 2MB!');
                        return false;
                    }
                    // var filename = "goods_img/"+ Date.parse(new Date()) + file.name;
                    var filename = file.name;
                    var index1 = filename.lastIndexOf(".");
                    var index2 = filename.length;
                    var type = filename.substring(index1, index2);
                    var new_filename = "goods_img/" + "文件名" +type;
                    var image_url_save;//解决回调中获取不到图像路径的问题
                    //开始上传图片到OSS
                    client.multipartUpload(new_filename, file).then(function (r1) {
                        var old_url = r1.res.requestUrls[0];
                        console.log(old_url);
                        if(old_url.indexOf('?')>0){
                            image_url_save=old_url.substring(0, old_url.indexOf('?'));
                        }else{
                            image_url_save=old_url;
                        }
                        //告诉自己的应用服务器，上传文件的路径，
                        $.post("-------------------------",
                            {imgurl: image_url_save,invId:somthing},
                        function(data){
                            //上传应用服务器结果提示
                            layer.msg(data);
                        })
                    }).catch(function (err) {
                        console.error('error: %j', err);
                    });
                }
            });
        });
    });
</script>
</html>

Rody杰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
阿里云 STS授权方式访问OSS对象存储

STS授权方式访问OSS对象存储记录原由：新手，首次使用阿里OSS，供同样是新手的人群，快速实现示例。需求资源地址两个资源的使用方式，具体见来源页面，代码概述如下：PHP后端：记录原由：新手，首次使用阿里OSS，供同样是新手的人群，快速实现示例。需求前端使用JS，直传阿里OSS服务器，秘钥相关参数，由自己应用服务器临时生成，且使用STS授权方式；资源地址前端资源：https://g...
复制链接

扫一扫