關於Vue項目中上傳文件到阿里雲OSS

時間 2019-11-17

標籤關於 vue 項目上傳文件阿里 oss 欄目阿里巴巴简体版

原文原文鏈接

關於Vue項目中上傳文件到阿里雲OSS

前言

本文主要講述在使用 Vue 開發的過程當中，使用到阿里雲 OSS 功能。html

源碼

github: alioss-js-upload前端

Useagevue

$ 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 進行相關配置！！！node

阿里雲 OSS 控制檯配置部分

註冊阿里雲帳號已不須要再贅述，下面主要介紹如何配置 oss ：ios

進入控制檯，鼠標移到右上角用戶名出，點擊 訪問權限 ，以下圖：
git

若是沒有此功能，可將鼠標移至 產品 -> 管理與控制 ，點擊 訪問控制 進入訪問控制產品頁，以下圖示：
github

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, Denynpm

Resrouce : 表示要受權的阿里雲資源名（ARN），格式爲："acs:<雲服務名>: <地域名>: <主帳號UID>:<資源URI>"。例如：「acs:mns:cn-hangzhou:123456789:/queues/MyQueue1/messages」json

3.受權子帳號訪問 MNS

返回 用戶管理 ,找到第一步建立的子帳號，點擊右側 受權
在彈出的對話框中，選擇受權策略名稱，並添加到右側已選受權策略列表，點擊 肯定 提交，以下圖：

enter image description here

4.建立角色

點擊左側的 角色管理 -> 新建角色以下圖：

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/*"
        ]
    }
    ]
};複製代碼