cos-js-sdk-v5
Version:
JavaScript SDK for [腾讯云对象存储](https://cloud.tencent.com/product/cos)
347 lines (329 loc) • 13.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>cos-js-sdk-v5</title>
<style>
body {
font-family: 'Microsoft YaHei';
}
.page {
min-width: 1000px;
margin: 0 auto;
padding: 0 50px;
}
.main-wrap {
float: left;
width: 100%;
}
.main {
margin-right: 700px;
margin-bottom: 20px;
display: none;
}
.main.show {
display: block;
}
.siderbar {
float: left;
width: 600px;
margin-left: -600px;
margin-bottom: 20px;
padding-top: 60px;
}
.result {
line-height: 1.3;
font-size: 13px;
font-family: monospace;
border: 1px solid #006eff;
margin: 0;
height: 200px;
overflow: auto;
box-sizing: border-box;
padding: 5px;
}
h1 {
font-weight: normal;
color: #333;
}
a {
color: #006eff;
background-color: transparent;
padding: 8px 16px;
line-height: 1.3;
display: inline-block;
text-align: center;
margin: 0 8px 8px 0;
border: 1px solid #006eff;
font-size: 14px;
text-decoration: none;
}
a:hover {
color: #fff;
background-color: #006eff;
}
hr {
border: 0;
border-top: 1px solid #006eff;
}
.demo-select-content {
display: inline-block;
font-size: 0;
margin-left: 20px;
}
.demo-select-content div {
display: inline-block;
font-size: 16px;
border: solid 1px #ddd;
padding: 2px 6px;
cursor: pointer;
}
.demo-select-content div.active {
border-color: #006eff;
color: #006eff;
}
</style>
</head>
<body>
<div class="page">
<h1>
cos-js-sdk-v5
<div class="demo-select-content">
<div class="active" id="showCosDemo">cos demo</div>
<div id="showCiDemo">ci demo</div>
</div>
</h1>
<div class="main-wrap">
<div class="main cos-main show"></div>
<div class="main ci-main"></div>
</div>
<div class="siderbar">
<pre class="result"></pre>
</div>
</div>
<script>
// config 替换成自己的存储桶和账号信息
var config = {
Bucket: 'test-1250000000',
Region: 'ap-guangzhou',
Uin: '10001',
};
window.config = config;
</script>
<script src="../demo/common/beacon.min.js"></script>
<script src="../demo/common/cls.min.js"></script>
<script src="../dist/cos-js-sdk-v5.js"></script>
<script src="./demo.js"></script>
<script type="module" src="./CIDemos/index.js"></script>
<script>
(function () {
var showCosDemoBtn = document.querySelector('#showCosDemo');
var showCiDemobtn = document.querySelector('#showCiDemo');
var cosMain = document.querySelector('.cos-main');
var ciMain = document.querySelector('.ci-main');
showCosDemoBtn.addEventListener('click', function (e) {
showCosDemoBtn.className = 'active';
showCiDemobtn.className = '';
cosMain.className = 'main cos-main show';
ciMain.className = 'main cos-main';
});
showCiDemobtn.addEventListener('click', function (e) {
showCosDemoBtn.className = '';
showCiDemobtn.className = 'active';
cosMain.className = 'main cos-main';
ciMain.className = 'main cos-main show';
});
var getAuthorization = function (options, callback) {
// 格式一、（推荐）后端通过获取临时密钥给到前端，前端计算签名
// 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
var url = '/sts'; // 如果是 npm run sts.js 起的 nodejs server，使用这个
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText);
var credentials = data.credentials;
} catch (e) {}
if (!data || !credentials) {
return logger.error('credentials invalid:\n' + JSON.stringify(data, null, 2));
}
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
});
};
xhr.send(JSON.stringify(options.Scope));
// // 格式二、（推荐）【细粒度控制权限】后端通过获取临时密钥给到前端，前端只有相同请求才重复使用临时密钥，后端可以通过 Scope 细粒度控制权限
// // 服务端例子：https://github.com/tencentyun/qcloud-cos-sts-sdk/edit/master/scope.md
// // var url = '../server/sts.php'; // 如果起的是 php server 用这个
// var url = '/sts-scope'; // 如果是 npm run sts.js 起的 nodejs server，使用这个
// var xhr = new XMLHttpRequest();
// xhr.open('POST', url, true);
// xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.onload = function (e) {
// try {
// var data = JSON.parse(e.target.responseText);
// var credentials = data.credentials;
// } catch (e) {
// }
// if (!data || !credentials) {
// return logger.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
// };
// callback({
// TmpSecretId: credentials.tmpSecretId,
// TmpSecretKey: credentials.tmpSecretKey,
// SecurityToken: credentials.sessionToken,
// StartTime: data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
// ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
// ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
// });
// };
// xhr.send(JSON.stringify(options.Scope));
// // 格式三、（不推荐，分片上传权限不好控制）前端每次请求前都需要通过 getAuthorization 获取签名，后端使用固定密钥或临时密钥计算签名返回给前端
// // 服务端获取签名，请参考对应语言的 COS SDK：https://cloud.tencent.com/document/product/436/6474
// // 注意：这种有安全风险，后端需要通过 method、pathname 严格控制好权限，比如不允许 put / 等
// var method = (options.Method || 'get').toLowerCase();
// var query = options.Query || {};
// var headers = options.Headers || {};
// var pathname = options.Pathname || '/';
// // var url = 'http://127.0.0.1:3000/auth';
// var url = '../server/auth.php';
// var xhr = new XMLHttpRequest();
// var data = {
// method: method,
// pathname: pathname,
// query: query,
// headers: headers,
// };
// xhr.open('POST', url, true);
// xhr.setRequestHeader('content-type', 'application/json');
// xhr.onload = function (e) {
// try {
// var data = JSON.parse(e.target.responseText);
// } catch (e) {
// }
// if (!data || !data.authorization) return console.error('authorization invalid');
// callback({
// Authorization: data.authorization,
// // SecurityToken: data.sessionToken, // 如果使用临时密钥，需要把 sessionToken 传给 SecurityToken
// });
// };
// xhr.send(JSON.stringify(data));
// // 格式四、（不推荐，适用于前端调试，避免泄露密钥）前端使用固定密钥计算签名
// var authorization = COS.getAuthorization({
// SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 可传固定密钥或者临时密钥
// SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 可传固定密钥或者临时密钥
// Method: options.Method,
// Pathname: options.Pathname,
// Query: options.Query,
// Headers: options.Headers,
// Expires: 900,
// });
// callback({
// Authorization: authorization,
// // SecurityToken: credentials.sessionToken, // 如果使用临时密钥，需要传 SecurityToken
// });
};
const clsClient = new ClsClient({
topicId: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx', // 日志主题 id
region: 'ap-guangzhou', // 日志主题所在地域，比如 ap-guangzhou
maxRetainDuration: 30, // 默认 30s
maxRetainSize: 20, // 默认20条
});
var cos = new COS({
getAuthorization: getAuthorization,
UploadCheckContentMd5: true,
// BeaconReporter: BeaconAction, // 开启灯塔上报
// ClsReporter: clsClient, // 开启 cls 上报
});
var util = {
createFile: function (options) {
var buffer = new ArrayBuffer(options.size || 0);
var arr = new Uint8Array(buffer);
[].forEach.call(arr, function (char, i) {
arr[i] = 0;
});
var opt = {};
options.type && (opt.type = options.type);
var blob = new Blob([buffer], options);
return blob;
},
selectLocalFile: function (onChange) {
var id = 'file_selector';
var input = document.createElement('input');
input.style = 'width:0;height:0;border:0;margin:0;padding:0;';
input.type = 'file';
input.id = id;
input.onchange = function (e) {
var files = this.files;
if (!files.length) return;
onChange && onChange(files);
document.body.removeChild(input);
};
document.body.appendChild(input);
input.click();
},
};
// 对更多字符编码的 url encode 格式
var camSafeUrlEncode = function (str) {
return encodeURIComponent(str)
.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\(/g, '%28')
.replace(/\)/g, '%29')
.replace(/\*/g, '%2A');
};
var pre = document.querySelector('.result');
var showLogText = function (text, color) {
if (typeof text === 'object') {
try {
text = JSON.stringify(text);
} catch (e) {}
}
var div = document.createElement('div');
div.innerText = text;
color && (div.style.color = color);
pre.appendChild(div);
pre.style.display = 'block';
pre.scrollTop = pre.scrollHeight;
};
var logger = {
log: function (text) {
console.log.apply(console, arguments);
var args = [].map.call(arguments, function (v) {
return typeof v === 'object' ? JSON.stringify(v, null, 2) : v;
});
var logStr = args.join(' ');
if (logStr.length > 1000000) {
logStr =
logStr.slice(0, 1000000) + '...content is too long, the first 1000000 characters are intercepted';
}
showLogText(logStr);
},
error: function (text) {
console.error(text);
showLogText(text, 'red');
},
};
/**
* 这里demo为了方便挂在了window上 实际使用请结合项目比如可使用模块导出
* */
window.cos = cos;
window.util = util;
window.logger = logger;
window.camSafeUrlEncode = camSafeUrlEncode;
})();
</script>
</body>
</html>