返回顶部
首页 > 资讯 > 前端开发 > html >vue页面如何使用oss上传功能
  • 862
分享到

vue页面如何使用oss上传功能

2024-04-02 19:04:59 862人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关Vue页面如何使用oss上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:进入控制台,鼠标移到右上角用户名处,点击“访问控制”,

这篇文章将为大家详细讲解有关Vue页面如何使用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 必须和之前创建的策略一致。

关于“vue页面如何使用oss上传功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: vue页面如何使用oss上传功能

本文链接: https://lsjlt.com/news/72395.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue页面如何使用oss上传功能
    这篇文章将为大家详细讲解有关vue页面如何使用oss上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:进入控制台,鼠标移到右上角用户名处,点击“访问控制”,...
    99+
    2024-04-02
  • Vue Element UI + OSS怎么实现上传文件功能
    这篇文章主要为大家展示了“Vue Element UI + OSS怎么实现上传文件功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue Element UI...
    99+
    2024-04-02
  • VUE如何实现选择上传图片并页面显示功能
    这篇文章给大家分享的是有关VUE如何实现选择上传图片并页面显示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下dem...
    99+
    2024-04-02
  • vue 使用OSS上传图片或附件讲解
    vue项目中使用OSS上传图片或附件 上传图片和附件这里不做区别;上传的流程都一样; 1、新建oss.js文件,封装使用oss (需要安装包ali-oss) const OSS ...
    99+
    2024-04-02
  • jQuery的ajax中如何使用FormData实现页面无刷新上传功能
    小编给大家分享一下jQuery的ajax中如何使用FormData实现页面无刷新上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1,先看效果图期望的功能和效果很简单:点击页面中的上传...
    99+
    2024-04-02
  • VUE如何实现上传图片功能
    这篇“VUE如何实现上传图片功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“VUE如何实现上传图片功能”文章吧。首先要创建...
    99+
    2023-07-04
  • Android如何使用Retrofit上传文件功能
    本文将为大家详细介绍“Android如何使用Retrofit上传文件功能”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“Android如何使用Retrofit上传文件功能”能够给你意想不到的收获,请大家跟着小编...
    99+
    2023-06-26
  • vue使用el-upload实现文件上传功能
    因为我是vue+springboot前后分离,要跨域,就不能用默认的action写请求地址,我用axios时最困扰的就是怎么拿到那个真实的文件,然后给传给后台。 其实可以通过自带的o...
    99+
    2024-04-02
  • Vue + Element 自定义上传封面组件功能
    前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果: 第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠...
    99+
    2023-01-10
    Vue Element 自定义上传 Vue Element 自定义组件 Vue  Element上传组件
  • HTML5 File API如何改善网页上传功能
    这篇文章主要介绍HTML5 File API如何改善网页上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! HTML 5 让 HTML 这个一度单纯的...
    99+
    2024-04-02
  • vue quill editor如何使用富文本添加上传音频功能
    这篇文章给大家分享的是有关vue quill editor如何使用富文本添加上传音频功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. 前言vue-quill-editor ...
    99+
    2024-04-02
  • vue如何使用element实现上传图片和修改图片功能
    本篇内容主要讲解“vue如何使用element实现上传图片和修改图片功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何使用element实现上传图片和修改图片功能”吧!一、应用场景1....
    99+
    2023-07-02
  • 如何使用PHP实现页面返回功能
    标题:PHP实现页面返回功能的方法及代码示例 在Web开发中,经常会遇到需要实现页面返回功能的情况,也就是用户点击返回按钮时能够返回到上一个页面。在PHP中,通过使用header函数结...
    99+
    2024-03-08
    页面 php 返回
  • HTML页面中如何使用Vue
    本文小编为大家详细介绍“HTML页面中如何使用Vue”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML页面中如何使用Vue”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Vue是用于构建用户界面的渐进式Jav...
    99+
    2023-07-05
  • 如何使用bootstrap上传插件fileinput实现ajax异步上传功能
    这篇文章将为大家详细讲解有关如何使用bootstrap上传插件fileinput实现ajax异步上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先需要导入一些js...
    99+
    2024-04-02
  • 如何使用Java SpringBoot实现文件上传功能
    小编给大家分享一下如何使用Java SpringBoot实现文件上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!测试代码pom.xml:<xml version="1.0"...
    99+
    2023-06-29
  • java如何使用Socket实现文件上传功能
    这篇文章主要介绍了java如何使用Socket实现文件上传功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下文件上传的步骤:服务器端步骤:创建ServerSock...
    99+
    2023-06-29
  • Vue vant-ui使用van-uploader实现头像上传功能
    效果图: 项目中是使用有赞vant-ui框架实现的头像上传替换功能 代码布局结构:  <van-row class="sendInfo"> ...
    99+
    2024-04-02
  • 使用vue怎么实现一个视频上传功能
    本篇文章为大家展示了使用vue怎么实现一个视频上传功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运...
    99+
    2023-06-14
  • vue怎么使用el-upload实现文件上传功能
    这篇文章主要介绍了vue怎么使用el-upload实现文件上传功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用el-upload实现文件上传功能文章都会有所收获,下面我们一起来看看吧。uploa...
    99+
    2023-06-30
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作