csp.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>cos-js-sdk-v5</title>
  9. <style>
  10. body { font-family: "Microsoft YaHei"; }
  11. .page {max-width:1024px;margin:0 auto;}
  12. h1 { font-weight: normal; color:#333;}
  13. 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; }
  14. a:hover { color: #fff; background-color: #006eff; }
  15. .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;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="page">
  20. <h1>cos-js-sdk-v5</h1>
  21. <div class="main"></div>
  22. <pre class="result"></pre>
  23. </div>
  24. <script src="../dist/cos-js-sdk-v5.js"></script>
  25. <script>
  26. var config = {
  27. Bucket: 'test-1250000000',
  28. Region: 'default'
  29. };
  30. var util = {
  31. createFile: function (options) {
  32. var buffer = new ArrayBuffer(options.size || 0);
  33. var arr = new Uint8Array(buffer);
  34. [].forEach.call(arr, function (char, i) {
  35. arr[i] = 0;
  36. });
  37. var opt = {};
  38. options.type && (opt.type = options.type);
  39. var blob = new Blob([buffer], options);
  40. return blob;
  41. }
  42. };
  43. var cos = new COS({
  44. CompatibilityMode: true,
  45. ServiceDomain: 'http://cos.default.example.com',
  46. // 后缀式
  47. Domain: 'http://cos.{Region}.example.com', // 后缀式
  48. ForcePathStyle: true, // 后缀式
  49. // 前缀式
  50. // Domain: 'http://{Bucket}.cos.{Region}.example.com', // 前缀式
  51. getAuthorization: function (options, callback) {
  52. var url = './auth-json.php?method=' + options.Method + '&path=' + encodeURIComponent(options.Key);
  53. var xhr = new XMLHttpRequest();
  54. xhr.open('GET', url, true);
  55. xhr.onload = function (e) {
  56. var sign;
  57. try {
  58. sign = JSON.parse(e.target.responseText).sign;
  59. } catch (e) {}
  60. callback(sign);
  61. };
  62. xhr.send();
  63. },
  64. });
  65. var TaskId;
  66. var pre = document.querySelector('.result');
  67. var showLogText = function (text, color) {
  68. if (typeof text === 'object') {
  69. try {
  70. text = JSON.stringify(text);
  71. } catch (e) {
  72. }
  73. }
  74. var div = document.createElement('div');
  75. div.innerText = text;
  76. color && (div.style.color = color);
  77. pre.appendChild(div);
  78. pre.style.display = 'block';
  79. pre.scrollTop = pre.scrollHeight;
  80. };
  81. var logger = {
  82. log: function (text) {
  83. console.log.apply(console, arguments);
  84. showLogText([].join.call(arguments, ' '));
  85. },
  86. error: function (text) {
  87. console.error(text);
  88. showLogText(text, 'red');
  89. },
  90. };
  91. function getObjectUrl() {
  92. var url = cos.getObjectUrl({
  93. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  94. Region: config.Region,
  95. Key: '1mb.zip',
  96. Expires: 60,
  97. Sign: true,
  98. }, function (err, data) {
  99. logger.log(err || data);
  100. });
  101. logger.log(url);
  102. }
  103. function getBucket() {
  104. cos.getBucket({
  105. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  106. Region: config.Region
  107. }, function (err, data) {
  108. logger.log(err || data);
  109. });
  110. }
  111. function headBucket() {
  112. cos.headBucket({
  113. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  114. Region: config.Region
  115. }, function (err, data) {
  116. logger.log(err || data);
  117. });
  118. }
  119. function putBucketAcl() {
  120. cos.putBucketAcl({
  121. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  122. Region: config.Region,
  123. // GrantFullControl: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  124. // GrantWrite: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  125. // GrantRead: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  126. // GrantReadAcp: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  127. // GrantWriteAcp: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  128. // ACL: 'public-read-write',
  129. // ACL: 'public-read',
  130. ACL: 'private',
  131. // AccessControlPolicy: {
  132. // "Owner": { // AccessControlPolicy 里必须有 owner
  133. // "ID": 'qcs::cam::uin/459000000:uin/459000000' // 459000000 是 Bucket 所属用户的 uin(帐号ID)
  134. // },
  135. // "Grants": [{
  136. // "Grantee": {
  137. // "ID": "qcs::cam::uin/1001:uin/1001", // 10002 是 uin(帐号ID)
  138. // "DisplayName": "qcs::cam::uin/1001:uin/1001" // 10002 是 uin(帐号ID)
  139. // },
  140. // "Permission": "READ"
  141. // }, {
  142. // "Grantee": {
  143. // "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
  144. // },
  145. // "Permission": "WRITE"
  146. // }, {
  147. // "Grantee": {
  148. // "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
  149. // },
  150. // "Permission": "READ_ACP"
  151. // }, {
  152. // "Grantee": {
  153. // "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
  154. // },
  155. // "Permission": "WRITE_ACP"
  156. // }]
  157. // }
  158. }, function (err, data) {
  159. logger.log(err || data);
  160. });
  161. }
  162. function getBucketAcl() {
  163. cos.getBucketAcl({
  164. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  165. Region: config.Region
  166. }, function (err, data) {
  167. logger.log(err || data);
  168. });
  169. }
  170. function putBucketCors() {
  171. cos.putBucketCors({
  172. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  173. Region: config.Region,
  174. CORSConfiguration: {
  175. "CORSRules": [{
  176. "AllowedOrigin": ["*"],
  177. "AllowedMethod": ["GET", "POST", "PUT", "DELETE", "HEAD"],
  178. "AllowedHeader": ["*"],
  179. "ExposeHeader": ["ETag", "x-cos-acl", "x-cos-delete-marker", "x-cos-server-side-encryption"],
  180. "MaxAgeSeconds": "5"
  181. }]
  182. }
  183. }, function (err, data) {
  184. logger.log(err || data);
  185. });
  186. }
  187. function getBucketCors() {
  188. cos.getBucketCors({
  189. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  190. Region: config.Region
  191. }, function (err, data) {
  192. logger.log(err || data);
  193. });
  194. }
  195. function deleteBucketCors() {
  196. cos.deleteBucketCors({
  197. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  198. Region: config.Region
  199. }, function (err, data) {
  200. logger.log(err || data);
  201. });
  202. }
  203. function getBucketLocation() {
  204. cos.getBucketLocation({
  205. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  206. Region: config.Region
  207. }, function (err, data) {
  208. logger.log(err || data);
  209. });
  210. }
  211. function putBucketLifecycle() {
  212. cos.putBucketLifecycle({
  213. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  214. Region: config.Region,
  215. LifecycleConfiguration: {
  216. "Rules": [{
  217. 'ID': 1,
  218. 'Filter': {
  219. 'Prefix': 'test123',
  220. },
  221. 'Status': 'Enabled',
  222. 'Transition': {
  223. 'Date': '2016-10-31T00:00:00+08:00',
  224. 'StorageClass': 'STANDARD_IA'
  225. }
  226. }]
  227. }
  228. }, function (err, data) {
  229. logger.log(err || data);
  230. });
  231. }
  232. function getBucketLifecycle() {
  233. cos.getBucketLifecycle({
  234. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  235. Region: config.Region
  236. }, function (err, data) {
  237. logger.log(err || data);
  238. });
  239. }
  240. function deleteBucketLifecycle() {
  241. cos.deleteBucketLifecycle({
  242. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  243. Region: config.Region
  244. }, function (err, data) {
  245. logger.log(err || data);
  246. });
  247. }
  248. function deleteBucket() {
  249. cos.deleteBucket({
  250. Bucket: 'testnew-' + config.Bucket.substr(config.Bucket.lastIndexOf('-') + 1),
  251. Region: 'ap-guangzhou'
  252. }, function (err, data) {
  253. logger.log(err || data);
  254. });
  255. }
  256. function putObject() {
  257. // 创建测试文件
  258. var filename = '1kb.zip';
  259. var blob = util.createFile({size: 1024});
  260. // 调用方法
  261. cos.putObject({
  262. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  263. Region: config.Region,
  264. Key: filename, /* 必须 */
  265. Body: blob,
  266. TaskReady: function (tid) {
  267. TaskId = tid;
  268. },
  269. onProgress: function (progressData) {
  270. logger.log(JSON.stringify(progressData));
  271. },
  272. }, function (err, data) {
  273. logger.log(err || data);
  274. });
  275. }
  276. function putObjectCopy() {
  277. cos.putObjectCopy({
  278. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  279. Region: config.Region,
  280. Key: '1mb.copy.zip',
  281. CopySource: config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + encodeURIComponent('1mb.zip').replace(/%2F/g, '/'), // Bucket 格式:test-1250000000
  282. }, function (err, data) {
  283. logger.log(err || data);
  284. });
  285. }
  286. function getObject() {
  287. cos.getObject({
  288. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  289. Region: config.Region,
  290. Key: '1mb.zip',
  291. }, function (err, data) {
  292. logger.log(err || data);
  293. });
  294. }
  295. function headObject() {
  296. cos.headObject({
  297. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  298. Region: config.Region,
  299. Key: '1mb.zip'
  300. }, function (err, data) {
  301. logger.log(err || data);
  302. });
  303. }
  304. function putObjectAcl() {
  305. cos.putObjectAcl({
  306. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  307. Region: config.Region,
  308. Key: '1mb.zip',
  309. // GrantFullControl: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  310. // GrantWrite: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  311. // GrantRead: 'id="qcs::cam::uin/1001:uin/1001",id="qcs::cam::uin/1002:uin/1002"',
  312. // ACL: 'public-read-write',
  313. // ACL: 'public-read',
  314. // ACL: 'private',
  315. ACL: 'default', // 继承上一级目录权限
  316. // AccessControlPolicy: {
  317. // "Owner": { // AccessControlPolicy 里必须有 owner
  318. // "ID": 'qcs::cam::uin/459000000:uin/459000000' // 459000000 是 Bucket 所属用户的 uin(帐号ID)
  319. // },
  320. // "Grants": [{
  321. // "Grantee": {
  322. // "ID": "qcs::cam::uin/10002:uin/10002", // 10002 是 uin(帐号ID)
  323. // },
  324. // "Permission": "READ"
  325. // }]
  326. // }
  327. }, function (err, data) {
  328. logger.log(err || data);
  329. });
  330. }
  331. function getObjectAcl() {
  332. cos.getObjectAcl({
  333. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  334. Region: config.Region,
  335. Key: '1mb.zip'
  336. }, function (err, data) {
  337. logger.log(err || data);
  338. });
  339. }
  340. function deleteObject() {
  341. cos.deleteObject({
  342. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  343. Region: config.Region,
  344. Key: '1mb.zip'
  345. }, function (err, data) {
  346. logger.log(err || data);
  347. });
  348. }
  349. function deleteMultipleObject() {
  350. cos.deleteMultipleObject({
  351. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  352. Region: config.Region,
  353. Objects: [
  354. {Key: '中文/中文.txt'},
  355. {Key: '中文/中文.zip'},
  356. ]
  357. }, function (err, data) {
  358. logger.log(err || data);
  359. });
  360. }
  361. function abortUploadTask() {
  362. cos.abortUploadTask({
  363. Bucket: config.Bucket, /* 必须 */ // Bucket 格式:test-1250000000
  364. Region: config.Region, /* 必须 */
  365. // 格式1,删除单个上传任务
  366. // Level: 'task',
  367. // Key: '10mb.zip',
  368. // UploadId: '14985543913e4e2642e31db217b9a1a3d9b3cd6cf62abfda23372c8d36ffa38585492681e3',
  369. // 格式2,删除单个文件所有未完成上传任务
  370. Level: 'file',
  371. Key: '10mb.zip',
  372. // 格式3,删除 Bucket 下所有未完成上传任务
  373. // Level: 'bucket',
  374. }, function (err, data) {
  375. logger.log(err || data);
  376. });
  377. }
  378. function sliceUploadFile() {
  379. var blob = util.createFile({size: 1024 * 1024 * 3});
  380. cos.sliceUploadFile({
  381. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  382. Region: config.Region,
  383. Key: '3mb.zip', /* 必须 */
  384. Body: blob,
  385. TaskReady: function (tid) {
  386. TaskId = tid;
  387. },
  388. onHashProgress: function (progressData) {
  389. logger.log('onHashProgress', JSON.stringify(progressData));
  390. },
  391. onProgress: function (progressData) {
  392. logger.log('onProgress', JSON.stringify(progressData));
  393. },
  394. }, function (err, data) {
  395. logger.log(err || data);
  396. });
  397. }
  398. function selectFileToUpload() {
  399. var input = document.createElement('input');
  400. input.type = 'file';
  401. input.onchange = function (e) {
  402. var file = this.files[0];
  403. if (file) {
  404. if (file.size > 1024 * 1024) {
  405. cos.sliceUploadFile({
  406. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  407. Region: config.Region,
  408. Key: file.name,
  409. Body: file,
  410. TaskReady: function (tid) {
  411. TaskId = tid;
  412. },
  413. onHashProgress: function (progressData) {
  414. logger.log('onHashProgress', JSON.stringify(progressData));
  415. },
  416. onProgress: function (progressData) {
  417. logger.log('onProgress', JSON.stringify(progressData));
  418. },
  419. }, function (err, data) {
  420. logger.log(err || data);
  421. });
  422. } else {
  423. cos.putObject({
  424. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  425. Region: config.Region,
  426. Key: file.name,
  427. Body: file,
  428. TaskReady: function (tid) {
  429. TaskId = tid;
  430. },
  431. onProgress: function (progressData) {
  432. logger.log(JSON.stringify(progressData));
  433. },
  434. }, function (err, data) {
  435. logger.log(err || data);
  436. });
  437. }
  438. }
  439. };
  440. input.click();
  441. }
  442. function cancelTask() {
  443. cos.cancelTask(TaskId);
  444. logger.log('canceled');
  445. }
  446. function pauseTask() {
  447. cos.pauseTask(TaskId);
  448. logger.log('paused');
  449. }
  450. function restartTask() {
  451. cos.restartTask(TaskId);
  452. logger.log('restart');
  453. }
  454. function uploadFiles() {
  455. var filename = 'mb.zip';
  456. var blob = util.createFile({size: 1024 * 1024 * 10});
  457. cos.uploadFiles({
  458. files: [{
  459. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  460. Region: config.Region,
  461. Key: '1' + filename,
  462. Body: blob,
  463. }, {
  464. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  465. Region: config.Region,
  466. Key: '2' + filename,
  467. Body: blob,
  468. }, {
  469. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  470. Region: config.Region,
  471. Key: '3' + filename,
  472. Body: blob,
  473. }],
  474. SliceSize: 1024 * 1024,
  475. onProgress: function (info) {
  476. var percent = parseInt(info.percent * 10000) / 100;
  477. var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
  478. logger.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;');
  479. },
  480. onFileFinish: function (err, data, options) {
  481. logger.log(options.Key + ' 上传' + (err ? '失败' : '完成'));
  482. },
  483. }, function (err, data) {
  484. logger.log(err || data);
  485. });
  486. }
  487. function sliceCopyFile() {
  488. // 创建测试文件
  489. var sourceName = '3mb.zip';
  490. var Key = '3mb.copy.zip';
  491. var sourcePath = config.Bucket + '.cos.' + config.Region + '.myqcloud.com/'+ encodeURIComponent(sourceName).replace(/%2F/g, '/');
  492. cos.sliceCopyFile({
  493. Bucket: config.Bucket, // Bucket 格式:test-1250000000
  494. Region: config.Region,
  495. Key: Key,
  496. CopySource: sourcePath,
  497. SliceSize: 2 * 1024 * 1024, // 大于2M的文件用分片复制,小于则用单片复制
  498. onProgress:function (info) {
  499. var percent = parseInt(info.percent * 10000) / 100;
  500. var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
  501. logger.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;');
  502. }
  503. },function (err,data) {
  504. if(err){
  505. logger.log(err);
  506. }else{
  507. logger.log(data);
  508. }
  509. });
  510. }
  511. var time0 = Date.now();
  512. var preMsg = '页面加载完成';
  513. var showTime = function (msg) {
  514. var time1 = Date.now();
  515. console.log(preMsg + '->' + msg, time1 - time0);
  516. preMsg = msg;
  517. time0 = time1;
  518. };
  519. var files;
  520. function selectUploadFiles() {
  521. showTime('弹出选文件窗口');
  522. var input = document.createElement('input');
  523. input.type = 'file';
  524. input.multiple = true;
  525. input.onchange = function (e) {
  526. files = this.files;
  527. showTime('选完文件');
  528. };
  529. input.click();
  530. }
  531. function startSelectUploadFiles() {
  532. files.length && cos.uploadFiles({
  533. files: [].map.call(files, function (file) {
  534. return {
  535. Bucket: config.Bucket,
  536. Region: config.Region,
  537. Key: file.name,
  538. Body: file,
  539. };
  540. }),
  541. SliceSize: 1024 * 1024,
  542. onProgress: function (info) {
  543. var percent = parseInt(info.percent * 10000) / 100;
  544. var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
  545. logger.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;');
  546. },
  547. onFileFinish: function (err, data, options) {
  548. logger.log(options.Key + ' 上传' + (err ? '失败' : '完成'));
  549. },
  550. }, function (err, data) {
  551. logger.log(err || data);
  552. });
  553. }
  554. (function () {
  555. var list = [
  556. // 'getService', // 不支持
  557. 'getAuth',
  558. 'getObjectUrl',
  559. // 'putBucket', // 不支持
  560. 'getBucket',
  561. 'headBucket',
  562. 'putBucketAcl',
  563. 'getBucketAcl',
  564. 'putBucketCors',
  565. 'getBucketCors',
  566. // 'deleteBucketCors', // 不提供
  567. 'getBucketLocation',
  568. 'getBucketLifecycle',
  569. 'putBucketLifecycle',
  570. 'deleteBucketLifecycle',
  571. 'deleteBucket',
  572. 'putObject',
  573. 'putObjectCopy',
  574. 'getObject',
  575. 'headObject',
  576. 'putObjectAcl',
  577. 'getObjectAcl',
  578. 'deleteObject',
  579. 'deleteMultipleObject',
  580. 'abortUploadTask',
  581. 'sliceUploadFile',
  582. 'selectFileToUpload',
  583. 'cancelTask',
  584. 'pauseTask',
  585. 'restartTask',
  586. 'uploadFiles',
  587. 'selectUploadFiles',
  588. 'startSelectUploadFiles',
  589. ];
  590. var container = document.querySelector('.main');
  591. var html = [];
  592. list.forEach(function (name) {
  593. html.push('<a href="javascript:void(0)">' + name + '</a>');
  594. });
  595. container.innerHTML = html.join('');
  596. container.onclick = function (e) {
  597. if (e.target.tagName === 'A') {
  598. var name = e.target.innerText.trim();
  599. window[name]();
  600. }
  601. };
  602. })();
  603. </script>
  604. </body>
  605. </html>