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

也可參考:


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

相關文章
相關標籤/搜索