123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651 |
- <!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>
|