作者:張醫博
淺談
今天帶來的是 OSS brower js SDK 的安裝過程和使用的 demo 測試用例。
環境準備
OSS brower js SDK 是基於 node js 框架上的服務端程序,服務端啟動以後,提供客戶端的訪問地址。
- 準備 node js 安裝,最好在 9.x.x 以上版本,我當前的測試版本是 v10.9.0
- 測試瀏覽器環境 ( IE>=10,主流版本的 Chrome/Firefox/Safari,主流版本的 Android/iOS/WindowsPhone )
開始安裝
下載源碼 git 庫
- git clone https://github.com/ali-sdk/ali-oss.git
npm 開始安裝
- cd ali-oss ,執行 npm install
- cd example ,執行 npm install
tips :因為部分瀏覽器不支持 promise,需要引入 promise 兼容庫。 例如:IE10 和 IE11 需要引入 promise-polyfill 。
修改配置文件
- OSS brower 自帶集成了 STS 生成的功能,其實就是在本地啟動了一個小型的 web server ,這樣用可以通過 STS 的安全方式上傳、下載 OSS。如果要用這個集成的 STS 生成方式,需要修改:
#vim ali-oss/example/server/config.js
module.exports = {
AccessKeyId: "子賬號 accesskey",
AccessKeySecret: "子賬號 accesskeysecret",
RoleArn: "角色 Arn",
// 建議 Token 失效時間為 1 小時
TokenExpireTime: '3600',
PolicyFile: 'policy/all_policy.txt'
};
- 如果用戶不想用這個集成的 STS 生成器,可以自己單獨寫個生成 STS 代碼。那麼上面的 1 步忽略,直接執行以下操作。 vim ali-oss/example/server/config.js,將 bucket 和 region 替換成自己的信息。
- 如果用戶自己單獨寫了一個 sts 的程序,需要將 main,js 中依賴的 sts 地址換成自己的訪問鏈接;
- 在 OSS 上配置跨域頭,避免跨域訪問到 OSS 是出現 deny 403 的情況。如果客戶端訪問是 http://192.168.1.102/brower/testindex.html ,在 OSS 跨域來源上 IP 也要加入,最方便的做法是配置為 *;
啟動
cd ali-oss/example 執行 npm run start
如果用戶想要用 https 的方式上傳,在 OSSClient 初始化時加上 secure:true 就是 https 傳輸了。
const client = new OSS({
region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket,
secure:true
});
下圖就是啟動後的效果
使用遇到問題
上傳回調如何添加
const uploadFile = function uploadFile(client) {
if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
uploadFileClient = client;
}
const file = document.getElementById('file').files[0];
const key = document.getElementById('object-key-file').value.trim() || 'object';
console.log(`${file.name} => ${key}`);
const options = {
progress,
partSize: 500 * 1024,
timeout:60000,
meta: {
year: 2017,
people: 'test',
},
callback: {
//這裡是添加上傳回調的位置
url: 'https://uploadtest.xueersi.com/v2/sync',
/* host: 'oss-cn-shenzhen.aliyuncs.com', */
/* eslint no-template-curly-in-string: [0] */
body: 'bucket=${bucket}&object=${object}&var1=${x:var1}',
contentType: 'application/x-www-form-urlencoded',
customValue: {
var1: 'value1',
var2: 'value2',
},
},
如何使用 https 傳輸
const client = new OSS({
region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket,
secret: true
})