本文主要講述在使用 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 :ios
進入控制檯,鼠標移到右上角用戶名出,點擊 訪問權限
,以下圖:
git
若是沒有此功能,可將鼠標移至 產品
-> 管理與控制
,點擊 訪問控制
進入訪問控制產品頁,以下圖示:
github
策略管理
-> 新建用戶
, 以下圖:受權策略模板(使用空模板)
受權策略名稱(自定義名稱)
,備註,策略內容,並提交。{
"Statement": [
{
"Action": "mns:*",
"Effect": "Allow",
"Resource": "acs:mns:*:*:*"
}
],
"Version": "1"
}複製代碼
受權策略是json
格式的字符串,其中,mns:
開頭。例如: "mns:SendMessage" 表示 MNS 服務的API:SendMessage/BatchSenMessage
Effect : 表示受權類型。例如:Allow
, Deny
npm
Resrouce : 表示要受權的阿里雲資源名 (ARN) ,格式爲:"acs:<雲服務名>: <地域名>: <主帳號UID>:<資源URI>"。例如:「acs:mns:cn-hangzhou:123456789:/queues/MyQueue1/messages」json
用戶管理
,找到第一步建立的子帳號,點擊右側 受權
受權策略名稱
,並添加到右側已選受權策略
列表,點擊 肯定
提交,以下圖:角色管理
-> 新建角色
以下圖:角色管理
,在右側的角色列表中選擇須要受權的角色,點擊受權
,以下圖:server 端的代碼中 後端
var sts = new STS({
accessKeyId: '子帳號 accessKeyId',
accessKeySecret: '子帳號 accessKeySecret',
});複製代碼
注:accessKeyId 和 accessKeySecret 爲第一步建立的子用戶的 key
rolearn
var rolearn = '對應角色的Arn值';複製代碼
var policy = {
"Version": "1",
"Statement": [
{
"Effect": "Allow",
"Action": [
"oss:GetObject",
"oss:PutObject"
],
"Resource": [
"acs:oss:*:*:BucketName",
"acs:oss:*:*:BucketName/*"
]
}
]
};複製代碼
這裏的policy
必須和以前建立的策略一致。須要在前端頁面中引入 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/*"
]
}
]
};複製代碼
也可參考:
至此,文章書寫完成,不求打賞不求粉,只願真誠幫到親,若有疏漏,敬請指出,定虛心更正!感謝閱讀!!!