web上传文件到阿里云oss
作者:Nix,博客:iamtaoxin.com
源码 demo **关乎H5直传的demo,在h5-direct分支;h5-direct
注: 具体配置方法可参照 vue页面使用阿里oss上传功能(一) 和 vue页面使用阿里oss上传图片功能(二)
前言 本文主要讲述在使用 Vue 开发的过程中,使用到阿里云 OSS 功能。
源码 github: alioss-js-upload ,源码在分支2.0
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 :
进入控制台,鼠标移到右上角用户名出,点击 访问权限
,如下图:
如果没有此功能,可将鼠标移至 产品
-> 管理与控制
,点击 访问控制
进入访问控制产品页,如下图示:
- 点击左侧的 策略管理 -> 新建用户 , 如下图:
- 在弹出对话框中:选择
授权策略模板(使用空模板)
- 编辑授权策略并提交:修改
授权策略名称(自定义名称)
,备注,策略内容,并提交。 示例:一个 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”
- 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
必须和之前创建的策略一致。
也可参考:
至此,文章书写完成,如有疏漏,敬请指出,定虚心更正! 感谢阅读!!!