本文介紹如何在Browser.js SDK中快速使用OSS服務，包括上傳文件、下載文件和查看文件列表等。
前提條件
注意事項
目前瀏覽器中不允許執行Bucket相關的操作，僅允許執行Object相關的操作，例如PutObject、GetObject等。
由于Browser.js SDK通常在瀏覽器環境下使用，為避免暴露阿里云賬號訪問密鑰（AccessKey ID和AccessKey Secret），強烈建議您使用臨時訪問憑證的方式執行OSS相關操作。
臨時訪問憑證包括臨時訪問密鑰（AccessKey ID和AccessKey Secret）和安全令牌（SecurityToken）。獲取臨時訪問憑證的具體操作，請參見授權訪問。
常見操作
以下為Browser.js SDK的常見操作。
搭建STS Server并從客戶端獲取臨時授權信息
搭建STS Server。
為方便您搭建STS Server，OSS提供了多個語言SDK demo。
重要以上demo僅供參考，在具體的生產環境中，請自行開發鑒權等業務所需代碼。
通過瀏覽器向搭建的STS服務發起請求，獲取STS臨時授權信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script> <script type="text/javascript"> // 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); } ); </script> </body> </html>
上傳文件
使用multipartUpload接口上傳文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">上傳</button>
<input id="file" type="file" />
<!--導入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "yourRegion",
authorizationV4: true,
// 從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);
}
});
</script>
</body>
</html>
下載文件
采用簽名URL的方式生成文件的下載鏈接，您只需要單擊鏈接即可下載文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--導入SDK文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "yourRegion",
authorizationV4: true,
// 從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);
</script>
</body>
</html>列舉文件
以下代碼用于列舉文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<script>
const client = new OSS({
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，yourRegion填寫為oss-cn-hangzhou。
region: "yourRegion",
authorizationV4: true,
// 從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) {
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();
</script>
</body>
</html>
文檔內容是否對您有幫助？