关于Vue项目中上传文件到阿里云OSS-白红宇

关于Vue项目中上传文件到阿里云OSS

前言

本文主要讲述在使用 Vue 开发的过程中，使用到阿里云功能。

源码

github:

Useage

$ git clone https://github.com/taosin/alioss-js-upload.git   //克隆到本地$ cd alioss-js-upload        $ npm install             //安装依赖$ node index.js      //启动server$ cd public      $ npm install$ npm run dev     //启动本地前端复制代码

注意：在使用 OSS 上传之前，需要对 OSS 进行相关配置！！！

阿里云 OSS 控制台配置部分

注册阿里云账号已不需要再赘述，下面主要介绍如何配置 oss ：

进入控制台，鼠标移到右上角用户名出，点击 访问权限 ，如下图：

图片一

如果没有此功能，可将鼠标移至 产品 -> 管理与控制 ，点击 访问控制 进入访问控制产品页，如下图示：

图片二

1.新建授权策略

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

图片三

2.新建授权策略

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

图片四

在弹出对话框中：选择授权策略模板（使用空模板）

编辑授权策略并提交：修改 授权策略名称（自定义名称），备注，策略内容，并提交。
示例：一个 MNS 授权策略内容模版:
```
{ "Statement": [    {       "Action": "mns:*",       "Effect": "Allow",       "Resource": "acs:mns:*:*:*"     } ], "Version": "1"}复制代码
```
授权策略是json格式的字符串，其中，
Action ：表示要授权的操作， MNS 操作都以mns:开头。例如: "mns:SendMessage" 表示 MNS 服务的API：SendMessage/BatchSenMessage

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

Resrouce : 表示要授权的阿里云资源名（ARN），格式为："acs:<云服务名>: <地域名>: <主账号UID>:<资源URI>"。例如：“acs:mns:cn-hangzhou:123456789:/queues/MyQueue1/messages”

3.授权子账号访问 MNS

返回 用户管理 ,找到第一步创建的子账号，点击右侧 授权

在弹出的对话框中，选择授权策略名称，并添加到右侧已选授权策略列表，点击 确定 提交，如下图：

enter image description here

4.创建角色

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

enter image description here

enter image description here

4.授权策略访问角色

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

enter image description here

5.注意事项

server 端的代码中

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

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

rolearn

var rolearn = '对应角色的Arn值';复制代码

policy

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

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

到这里， OSS 的控台之配置已经完成，接下来我们在项目中更改相应的配置代码即可。

代码部分

前端部分

需要在前端页面中引入 oss-skd，在 index.html 可以下面方式引入：

复制代码

后端部分

server 端（service.js）需要修改的代码如下：

var sts = new STS({    accessKeyId: '你的accessKeyId',    accessKeySecret: '你的accessKeySecret',});var rolearn = '你的rolearn';var policy = {    "Version": "1",    "Statement": [    {        "Effect": "Allow",        "Action": [        "oss:GetObject",        "oss:PutObject"        ],        "Resource": [        "acs:oss:*:*:oss-upload",        "acs:oss:*:*:oss-upload/*"        ]    }    ]};复制代码

也可参考：

至此，文章书写完成，不求打赏不求粉，只愿真诚帮到亲，如有疏漏，敬请指出，定虚心更正！

感谢阅读！！！