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 学习笔记 选择器之四
Jul 23 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 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五种设计模式小结
2011/03/23 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
学习十八大的心得体会
2014/09/01 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
入党政审材料范文
2014/12/24 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
redis缓存存储Session原理机制
2021/11/20 Redis