關於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上傳圖片功能(二)

---

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