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

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

---

前言

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

源码

github: alioss-js-upload

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 能够下面方式引入：

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>复制代码

后端部分

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/*"
        ]
    }
    ]
};复制代码

---

也可参考：

• vue页面使用阿里oss上传功能（一）
• vue页面使用阿里oss上传图片功能(二)

---

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