關於Vue專案中上傳檔案到阿里雲OSS

Nix_____發表於2017-11-16
Vue阿里

關於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
    enter image description here
4.建立角色
  • 點選左側的 角色管理 -> 新建角色如下圖：
    enter image description here
    enter image description here

enter image description here
enter image description here

4.授權策略訪問角色
  • 點選左側的 角色管理 ,在右側的角色列表中選擇需要授權的角色，點選授權，如下圖：
    enter image description here
    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/*"
        ]
    }
    ]
};複製程式碼

也可參考：

至此，文章書寫完成，不求打賞不求粉，只願真誠幫到親，如有疏漏，敬請指出，定虛心更正！
感謝閱讀！！！

相關文章