<!doctype 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 {max-width:1024px;margin:0 auto;}
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; }
.result {display:none;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;}
</style>
</head>
<body>
<div class="page">
<h1>cos-js-sdk-v5</h1>
<div class="main"></div>
<pre class="result"></pre>
</div>
<script src="../dist/cos-js-sdk-v5.js"></script>
<script>
var config = {
Bucket: 'test-1250000000',
Region: 'default'
};
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;
}
};
var cos = new COS({
CompatibilityMode: true,
ServiceDomain: 'http://cos.default.example.com',
// 后缀式
Domain: 'http://cos.{Region}.example.com', // 后缀式
ForcePathStyle: true, // 后缀式
// 前缀式
// Domain: 'http://{Bucket}.cos.{Region}.example.com', // 前缀式
getAuthorization: function (options, callback) {
var url = './auth-json.php?method=' + options.Method + '&path=' + encodeURIComponent(options.Key);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
var sign;
try {
sign = JSON.parse(e.target.responseText).sign;
} catch (e) {}
callback(sign);
};
xhr.send();
},
});
var TaskId;
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);
showLogText([].join.call(arguments, ' '));
},
error: function (text) {
console.error(text);
showLogText(text, 'red');
},
};
function getObjectUrl() {
var url = cos.getObjectUrl({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip',
Expires: 60,
Sign: true,
}, function (err, data) {
logger.log(err || data);
});
logger.log(url);
}
function getBucket() {
cos.getBucket({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function headBucket() {
cos.headBucket({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function putBucketAcl() {
cos.putBucketAcl({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
// GrantFullControl: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantWrite: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantRead: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantReadAcp: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantWriteAcp: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// ACL: 'public-read-write',
// ACL: 'public-read',
ACL: 'private',
// AccessControlPolicy: {
// "Owner": { // AccessControlPolicy 里必须有 owner
// "ID": 'qcs::cam::uin/459000000:uin/459000000' // 459000000 是 Bucket 所属用户的 uin(帐号ID)
// },
// "Grants": [{
// "Grantee": {
// "ID": "qcs::cam::uin/1001:uin/1001", // 10002 是 uin(帐号ID)
// "DisplayName": "qcs::cam::uin/1001:uin/1001" // 10002 是 uin(帐号ID)
// },
// "Permission": "READ"
// }, {
// "Grantee": {
// "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
// },
// "Permission": "WRITE"
// }, {
// "Grantee": {
// "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
// },
// "Permission": "READ_ACP"
// }, {
// "Grantee": {
// "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
// },
// "Permission": "WRITE_ACP"
// }]
// }
}, function (err, data) {
logger.log(err || data);
});
}
function getBucketAcl() {
cos.getBucketAcl({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function putBucketCors() {
cos.putBucketCors({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
CORSConfiguration: {
"CORSRules": [{
"AllowedOrigin": ["*"],
"AllowedMethod": ["GET", "POST", "PUT", "DELETE", "HEAD"],
"AllowedHeader": ["*"],
"ExposeHeader": ["ETag", "x-cos-acl", "x-cos-delete-marker", "x-cos-server-side-encryption"],
"MaxAgeSeconds": "5"
}]
}
}, function (err, data) {
logger.log(err || data);
});
}
function getBucketCors() {
cos.getBucketCors({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function deleteBucketCors() {
cos.deleteBucketCors({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function getBucketLocation() {
cos.getBucketLocation({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function putBucketLifecycle() {
cos.putBucketLifecycle({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
LifecycleConfiguration: {
"Rules": [{
'ID': 1,
'Filter': {
'Prefix': 'test123',
},
'Status': 'Enabled',
'Transition': {
'Date': '2016-10-31T00:00:00+08:00',
'StorageClass': 'STANDARD_IA'
}
}]
}
}, function (err, data) {
logger.log(err || data);
});
}
function getBucketLifecycle() {
cos.getBucketLifecycle({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function deleteBucketLifecycle() {
cos.deleteBucketLifecycle({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region
}, function (err, data) {
logger.log(err || data);
});
}
function deleteBucket() {
cos.deleteBucket({
Bucket: 'testnew-' + config.Bucket.substr(config.Bucket.lastIndexOf('-') + 1),
Region: 'ap-guangzhou'
}, function (err, data) {
logger.log(err || data);
});
}
function putObject() {
// 创建测试文件
var filename = '1kb.zip';
var blob = util.createFile({size: 1024});
// 调用方法
cos.putObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: filename, /* 必须 */
Body: blob,
TaskReady: function (tid) {
TaskId = tid;
},
onProgress: function (progressData) {
logger.log(JSON.stringify(progressData));
},
}, function (err, data) {
logger.log(err || data);
});
}
function putObjectCopy() {
cos.putObjectCopy({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.copy.zip',
CopySource: config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + encodeURIComponent('1mb.zip').replace(/%2F/g, '/'), // Bucket 格式：test-1250000000
}, function (err, data) {
logger.log(err || data);
});
}
function getObject() {
cos.getObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip',
}, function (err, data) {
logger.log(err || data);
});
}
function headObject() {
cos.headObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip'
}, function (err, data) {
logger.log(err || data);
});
}
function putObjectAcl() {
cos.putObjectAcl({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip',
// GrantFullControl: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantWrite: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// GrantRead: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
// ACL: 'public-read-write',
// ACL: 'public-read',
// ACL: 'private',
ACL: 'default', // 继承上一级目录权限
// AccessControlPolicy: {
// "Owner": { // AccessControlPolicy 里必须有 owner
// "ID": 'qcs::cam::uin/459000000:uin/459000000' // 459000000 是 Bucket 所属用户的 uin(帐号ID)
// },
// "Grants": [{
// "Grantee": {
// "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
// },
// "Permission": "READ"
// }]
// }
}, function (err, data) {
logger.log(err || data);
});
}
function getObjectAcl() {
cos.getObjectAcl({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip'
}, function (err, data) {
logger.log(err || data);
});
}
function deleteObject() {
cos.deleteObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1mb.zip'
}, function (err, data) {
logger.log(err || data);
});
}
function deleteMultipleObject() {
cos.deleteMultipleObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Objects: [
{Key: '中文/中文.txt'},
{Key: '中文/中文.zip'},
]
}, function (err, data) {
logger.log(err || data);
});
}
function abortUploadTask() {
cos.abortUploadTask({
Bucket: config.Bucket, /* 必须 */ // Bucket 格式：test-1250000000
Region: config.Region, /* 必须 */
// 格式1，删除单个上传任务
// Level: 'task',
// Key: '10mb.zip',
// UploadId: '14985543913e4e2642e31db217b9a1a3d9b3cd6cf62abfda23372c8d36ffa38585492681e3',
// 格式2，删除单个文件所有未完成上传任务
Level: 'file',
Key: '10mb.zip',
// 格式3，删除 Bucket 下所有未完成上传任务
// Level: 'bucket',
}, function (err, data) {
logger.log(err || data);
});
}
function sliceUploadFile() {
var blob = util.createFile({size: 1024 * 1024 * 3});
cos.sliceUploadFile({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '3mb.zip', /* 必须 */
Body: blob,
TaskReady: function (tid) {
TaskId = tid;
},
onHashProgress: function (progressData) {
logger.log('onHashProgress', JSON.stringify(progressData));
},
onProgress: function (progressData) {
logger.log('onProgress', JSON.stringify(progressData));
},
}, function (err, data) {
logger.log(err || data);
});
}
function selectFileToUpload() {
var input = document.createElement('input');
input.type = 'file';
input.onchange = function (e) {
var file = this.files[0];
if (file) {
if (file.size > 1024 * 1024) {
cos.sliceUploadFile({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: file.name,
Body: file,
TaskReady: function (tid) {
TaskId = tid;
},
onHashProgress: function (progressData) {
logger.log('onHashProgress', JSON.stringify(progressData));
},
onProgress: function (progressData) {
logger.log('onProgress', JSON.stringify(progressData));
},
}, function (err, data) {
logger.log(err || data);
});
} else {
cos.putObject({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: file.name,
Body: file,
TaskReady: function (tid) {
TaskId = tid;
},
onProgress: function (progressData) {
logger.log(JSON.stringify(progressData));
},
}, function (err, data) {
logger.log(err || data);
});
}
}
};
input.click();
}
function cancelTask() {
cos.cancelTask(TaskId);
logger.log('canceled');
}
function pauseTask() {
cos.pauseTask(TaskId);
logger.log('paused');
}
function restartTask() {
cos.restartTask(TaskId);
logger.log('restart');
}
function uploadFiles() {
var filename = 'mb.zip';
var blob = util.createFile({size: 1024 * 1024 * 10});
cos.uploadFiles({
files: [{
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '1' + filename,
Body: blob,
}, {
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '2' + filename,
Body: blob,
}, {
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: '3' + filename,
Body: blob,
}],
SliceSize: 1024 * 1024,
onProgress: function (info) {
var percent = parseInt(info.percent * 10000) / 100;
var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
logger.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
},
onFileFinish: function (err, data, options) {
logger.log(options.Key + ' 上传' + (err ? '失败' : '完成'));
},
}, function (err, data) {
logger.log(err || data);
});
}
function sliceCopyFile() {
// 创建测试文件
var sourceName = '3mb.zip';
var Key = '3mb.copy.zip';
var sourcePath = config.Bucket + '.cos.' + config.Region + '.myqcloud.com/'+ encodeURIComponent(sourceName).replace(/%2F/g, '/');
cos.sliceCopyFile({
Bucket: config.Bucket, // Bucket 格式：test-1250000000
Region: config.Region,
Key: Key,
CopySource: sourcePath,
SliceSize: 2 * 1024 * 1024, // 大于2M的文件用分片复制，小于则用单片复制
onProgress:function (info) {
var percent = parseInt(info.percent * 10000) / 100;
var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
logger.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
}
},function (err,data) {
if(err){
logger.log(err);
}else{
logger.log(data);
}
});
}
var time0 = Date.now();
var preMsg = '页面加载完成';
var showTime = function (msg) {
var time1 = Date.now();
console.log(preMsg + '->' + msg, time1 - time0);
preMsg = msg;
time0 = time1;
};
var files;
function selectUploadFiles() {
showTime('弹出选文件窗口');
var input = document.createElement('input');
input.type = 'file';
input.multiple = true;
input.onchange = function (e) {
files = this.files;
showTime('选完文件');
};
input.click();
}
function startSelectUploadFiles() {
files.length && cos.uploadFiles({
files: [].map.call(files, function (file) {
return {
Bucket: config.Bucket,
Region: config.Region,
Key: file.name,
Body: file,
};
}),
SliceSize: 1024 * 1024,
onProgress: function (info) {
var percent = parseInt(info.percent * 10000) / 100;
var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
logger.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
},
onFileFinish: function (err, data, options) {
logger.log(options.Key + ' 上传' + (err ? '失败' : '完成'));
},
}, function (err, data) {
logger.log(err || data);
});
}
(function () {
var list = [
// 'getService', // 不支持
'getAuth',
'getObjectUrl',
// 'putBucket', // 不支持
'getBucket',
'headBucket',
'putBucketAcl',
'getBucketAcl',
'putBucketCors',
'getBucketCors',
// 'deleteBucketCors', // 不提供
'getBucketLocation',
'getBucketLifecycle',
'putBucketLifecycle',
'deleteBucketLifecycle',
'deleteBucket',
'putObject',
'putObjectCopy',
'getObject',
'headObject',
'putObjectAcl',
'getObjectAcl',
'deleteObject',
'deleteMultipleObject',
'abortUploadTask',
'sliceUploadFile',
'selectFileToUpload',
'cancelTask',
'pauseTask',
'restartTask',
'uploadFiles',
'selectUploadFiles',
'startSelectUploadFiles',
];
var container = document.querySelector('.main');
var html = [];
list.forEach(function (name) {
html.push('<a href="javascript:void(0)">' + name + '</a>');
});
container.innerHTML = html.join('');
container.onclick = function (e) {
if (e.target.tagName === 'A') {
var name = e.target.innerText.trim();
window[name]();
}
};
})();
</script>
</body>
</html>