本文介绍如何在Browser.js SDK中快速使用OSS服务，包括上传文件、下载文件和查看文件列表等。
前提条件
-
已安装Browser.js SDK。具体操作，请参见Browser.js安装。
-
已配置跨域资源共享（CORS）规则。具体操作，请参见准备工作。
注意事项
常见操作
以下为Browser.js SDK的常见操作。
搭建STS Server并从客户端获取临时授权信息
-
搭建STS Server。
为方便您搭建STS Server，OSS提供了多个语言SDK demo。
-
Node.js
-
PHP
-
Java
-
Ruby
重要
以上demo仅供参考，在具体的生产环境中，请自行开发鉴权等业务所需代码。
-
-
通过浏览器向搭建的STS服务发起请求，获取STS临时授权信息。
Document // OSS.urllib是SDK内部封装的发送请求的逻辑，开发者可以使用任何发送请求的库向your_sts_server发送请求。 // your_sts_server需要填写步骤1中您搭建的STS Server的IP地址或域名。 OSS.urllib.request( "your_sts_server", { method: "GET" }, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { errmsg = "parse sts response info error: " + e.message; return alert(errmsg); } console.log(result); } );
上传文件
使用multipartUpload接口上传文件。
Document
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: "yourRegion",
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// 从STS服务获取的安全令牌（SecurityToken）。
stsToken: "yourSecurityToken",
// 填写Bucket名称，例如examplebucket。
bucket: "examplebucket",
});
const headers = {
// 指定该Object被下载时的网页缓存行为。
"Cache-Control": "no-cache",
// 指定该Object被下载时的名称。
"Content-Disposition": "example.txt",
// 指定该Object被下载时的内容编码格式。
"Content-Encoding": "utf-8",
// 指定过期时间，单位为毫秒。
Expires: "1000",
// 指定Object的存储类型。
"x-oss-storage-class": "Standard",
// 指定Object标签，可同时设置多个标签。
"x-oss-tagging": "Tag1=1&Tag2=2",
// 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
"x-oss-forbid-overwrite": "true",
};
// 指定上传到examplebucket的Object名称，例如exampleobject.txt。
const name = "exampleobject.txt";
// 获取DOM。
const submit = document.getElementById("submit");
const options = {
// 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => {
console.log(p);
},
// 设置并发上传的分片数量。
parallel: 4,
// 设置分片大小。默认值为1 MB，最小值为100 KB。
partSize: 1024 * 1024,
// headers,
// 自定义元数据，通过HeadObject接口可以获取Object的元数据。
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
// 监听按钮。
submit.addEventListener("click", async () => {
try {
const data = document.getElementById("file").files[0];
// 分片上传。
const res = await client.multipartUpload(name, data, {
...options,
// 设置上传回调。
// 如果不涉及回调服务器，请删除callback相关设置。
callback: {
// 设置回调请求的服务器地址。
url: "http://examplebucket.aliyuncs.com:23450",
// 设置回调请求消息头中Host的值，即您的服务器配置Host的值。
host: "yourHost",
/* eslint no-template-curly-in-string: [0] */
// 设置发起回调时请求body的值。
body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
// 设置发起回调请求的Content-Type。
contentType: "application/x-www-form-urlencoded",
customValue: {
// 设置发起回调请求的自定义参数。
var1: "value1",
var2: "value2",
},
},
});
console.log(res);
} catch (err) {
console.log(err);
}
});
下载文件
采用签名URL的方式生成文件的下载链接，您只需要单击链接即可下载文件。
Document
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: "yourRegion",
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// 从STS服务获取的安全令牌（SecurityToken）。
stsToken: "yoursecurityToken",
// 填写Bucket名称。
bucket: "examplebucket",
});
// 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。
const filename = "examplefile.txt";
const response = {
"content-disposition": `attachment; filename=${encodeURIComponent(
filename
)}`,
};
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
const url = client.signatureUrl("exampleobject.txt", { response });
console.log(url);
列举文件
以下代码用于列举文件。
Document
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
region: "yourRegion",
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
// 填写Bucket名称，例如examplebucket。
bucket: "examplebucket",
});
async function list(dir) {
try {
// 默认最多返回1000个文件。
let result = await client.list();
console.log(result);
// 从上一次list操作读取的最后一个文件的下一个文件开始继续获取文件列表。
if (result.isTruncated) {
let result = await client.list({ marker: result.nextMarker });
}
// 列出前缀为'ex'的文件。
result = await client.list({
prefix: "ex",
});
console.log(result);
// 列出前缀为'ex'且文件名称字母序'example'之后的文件。
result = await client.list({
prefix: "ex",
marker: "example",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
list();
内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家
阿里云企业补贴进行中： 马上申请
腾讯云限时活动1折起，即将结束： 马上收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠
转转请注明出处：https://www.yunxiaoer.com/159421.html
