JavaScript-SDK之如何实现浏览器应用?
浏览器支持
- IE(>=10)和Edge
- 主流版本的Chrome/Firefox/Safari
- 主流版本的Android/iOS/WindowsPhone
[backcolor=transparent]注意：
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
设置
Bucket设置
从浏览器中直接访问OSS，需要对Bucket的 CORS属性进行设置，设置方式如下所示：
- 将 [backcolor=transparent]来源 设置成 *
- 将 [backcolor=transparent]Method 设置成 GET, POST, PUT, DELETE, HEAD
- 将 [backcolor=transparent]Allowed Header 设置成 *
- 将 [backcolor=transparent]Expose Header 设置成 ETag
[backcolor=transparent]注意：请将该条CORS规则设置成所有CORS规则的第一条。
STS设置
为了不在网页中暴露AccessKeyId和AccessKeySecret，我们采用STS进行临时授权。授权服务器由用户维护，只有认证的用户才能向授权服务器申请临时权限。参考 OSS使用STS设置子账号和STS的Policy，参考 Node.js STS AppServer搭建自己的授权服务器。
例子
下面我们将使用SDK开发一个网页应用，包含4个功能：
- 上传文件
- 上传文本
- 列出文件
- 下载文件
完整的代码可以在 oss-in-browser找到。最终的效果如下：
下面的介绍将以“上传文件”为例：
1. 创建网页
对于“上传文件”的功能，在网页上需要4个控件：
- 一个文件选择框，用于选择需要上传的文件
- 一个文本框，用于输入上传到OSS的Object名字
- 一个按钮，用于开始上传
- 一个进度条，用于显示上传的进度
下面的代码创建了这4个控件，其中class="xxx"是为了使用 Bootstrap样式，可以先忽略。
<div class="form-group">
<label>Select file</label>
<input type="file" id="file" />
</div>
<div class="form-group">
<label>Store as</label>
<input type="text" class="form-control" id="object-key-file" value="object" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" id="file-button" value="Upload" />
</div>
<div class="form-group">
<div class="progress">
<div id="progress-bar"
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
</div>
2. 添加样式
接下来为网页添加一些样式，让它更好看一些，这里我们用到了 Bootstrap。在网页的<head>标签中加入样式：
<head>
<title>OSS in Browser</title>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
其中bootstrap.min.css可以在bootstrap的官网下载。
3. 添加脚本
到目前为止，网页是静态的，点击上面的按钮也不会有反应。接下来的重点是为它添加一些JavaScript脚本，让它能够上传文件/下载文件/列出文件。
首先在<head>标签中引入SDK的开发包：
<head>
<title>OSS in Browser</title>
<link rel="stylesheet" href="bootstrap.min.css" />
<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
其中app.js是真正执行上传文件的代码，内容如下：
var appServer = 'http://localhost:3000';
var bucket = 'js-sdk-bucket-sts';
var region = 'oss-cn-hangzhou';
var urllib = OSS.urllib;
var OSS = OSS.Wrapper;
var STS = OSS.STS;
var applyTokenDo = function (func) {
var url = appServer;
return urllib.request(url, {
method: 'GET'
}).then(function (result) {
var creds = JSON.parse(result.data);
var client = new OSS({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
return func(client);
});
};
var progress = function (p) {
return function (done) {
var bar = document.getElementById('progress-bar');
bar.style.width = Math.floor(p * 100) + '%';
bar.innerHTML = Math.floor(p * 100) + '%';
done();
}
};
var uploadFile = function (client) {
var file = document.getElementById('file').files[0];
var key = document.getElementById('object-key-file').value.trim() || 'object';
console.log(file.name + ' => ' + key);
return client.multipartUpload(key, file, {
progress: progress
}).then(function (res) {
console.log('upload success: %j', res);
return listFiles(client);
});
};
window.onload = function () {
document.getElementById('file-button').onclick = function () {
applyTokenDo(uploadFile);
}
};
上传一个文件分为以下步骤：
- 向授权服务器申请临时权限。其中授权服务器是[backcolor=transparent]网站开发者构建的用于向[backcolor=transparent]终端用户提供临时授权的服务。开发者可以在授权时为不同的用户提供不同的权限（参考OSS使用STS)。授权服务器可以参考这个例子，为了简便，例子中授权服务器直接向用户返回临时凭证。
- 使用临时密钥创建OSS Client。
- 通过multipartUpload上传选中的文件，并通过progress参数设置进度条。
4. 其他功能
上传文本内容、获取文件列表、下载文件等功能请参考代码示例： OSS in Browser。
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
Re提交上传的时候报错，求教！！！我的项目中使用的是angular4，在提交上传的时候报错。
提交上传代码块：
uploadFile() {
const files = this.filesList; const key = 'object';
const client = new OSS. Wrapper({ region: this.region,
accessKeyId: this.accessKeyId, accessKeySecret: this.accesskey,
bucket: this.bucket });
client. multipartUpload(key, files, { progress: this.progress
}). then((( res : any) => { alert( ` ${res } `);
console. log( 'upload success'); this.uploadStatus. emit(res);
})); };
报错信息见附件：求解！
2018-06-25 14:07:01赞同 展开评论
相关问答