vue页面使用阿里oss上传功能的实例(二)


Posted in Javascript onAugust 09, 2017

本文主要介绍OSS管理控制台设置访问权限、角色等。分享给大家,具体如下:

进入控制台,鼠标移到右上角用户名处,点击“访问控制”,如下图:

vue页面使用阿里oss上传功能的实例(二)

如果没有此功能,则将鼠标移至 产品 -> 管理与控制,点击 访问控制进入访问控制产品页

vue页面使用阿里oss上传功能的实例(二)

1.创建子账号

点击左侧的 用户管理 -> 自定义授权策略 ->新建授权策略 , 如下图:

vue页面使用阿里oss上传功能的实例(二)

2.新建授权策略

点击左侧的 策略管理 -> 新建用户 , 如下图:

vue页面使用阿里oss上传功能的实例(二)

  • 在弹出对话框中:选择授权策略模板(使用空模板)
  • 编辑授权策略并提交:修改 授权策略名称(自定义名称),备注,策略内容,并提交。

示例:一个MNS授权策略内容模版:

{
            "Statement": [
             {
                "Action": "mns:*",
                "Effect": "Allow",
                "Resource": "acs:mns:*:*:*" 
              }
            ],
            "Version": "1"
           }

授权策略是json格式的字符串,其中,Action : 表示要授权的操作,MNS 操作都以"mns:"开头,

例如: "mns:SendMessage" 表示 MNS 服务的API:SendMessage/BatchSenMessage

其他详见附录:MNS API和授权操作映射表;

Effect : 表示授权类型, 例如:Allow, Deny

Resrouce : 表示要授权的阿里云资源名(ARN),格式为:"acs:<云服务名>: <地域名>: <主账号UID>:<资源URI>"

例如:“acs:mns:cn-hangzhou:123456789:/queues/MyQueue1/messages”

表示:授权资源是主账号UID为123456789在cn-hangzhou地域的MyQueue1。
用""表示不指定具体的字段,例如:"acs:mns:::" 表示不指定地域名,主账号ID和资源URI,子账号可以访问主账号的所有mns资源。

3.授权子账号访问MNS

  • 返回 用户管理 ,找到第一步创建的子账号,点击右侧 授权
  • 在弹出的对话框中,选择授权策略名称,并添加到右侧已选授权策略列表,点击 确定 提交,如下图:

vue页面使用阿里oss上传功能的实例(二)

4.创建角色

点击左侧的 角色管理 -> 新建角色如下图:

vue页面使用阿里oss上传功能的实例(二)

vue页面使用阿里oss上传功能的实例(二)

4.授权策略访问角色

点击左侧的 角色管理 ,在右侧的角色列表中选择需要授权的角色,点击授权,如下图:

vue页面使用阿里oss上传功能的实例(二)

5.注意事项

1.server端的代码中

var sts = new STS({
  accessKeyId: '子账号 accessKeyId',
  accessKeySecret: '子账号 accessKeySecret',
});

accessKeyId 和 accessKeySecret 为第一步创建的子用户的 key

2.rolearn

var rolearn = '对应角色的Arn值';

3.policy

var policy = {
  "Version": "1",
  "Statement": [
  {
    "Effect": "Allow",
    "Action": [
    "oss:GetObject",
    "oss:PutObject"
    ],
    "Resource": [
    "acs:oss:*:*:BucketName",
    "acs:oss:*:*:BucketName/*"
    ]
  }
  ]
};

这里的policy 必须和之前创建的策略一致。

源码地址:https://github.com/taosin/alioss-js-upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 #Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
vue 打包后的文件部署到express服务器上的方法
Aug 09 #Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 #Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python网络编程详解
2017/10/31 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python中super函数用法实例分析
2019/03/18 Python
Python何时应该使用Lambda函数
2019/07/02 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
法学毕业生自荐信
2013/11/13 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书