Skip to content

Commit f1be36f

Browse files
livehighlivehigh
authored
feat: 优化万象demo (#191)
1 parent afc8200 commit f1be36f

File tree

4 files changed

+273
-3401
lines changed

4 files changed

+273
-3401
lines changed

‎demo/ciDemo.js‎

Lines changed: 4 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,6 @@
1-
// @ts-check
2-
// config 替换成自己的存储桶和账号信息
3-
var config = {
4-
Bucket: 'test-1250000000',
5-
Region: 'ap-guangzhou',
6-
Uin: '10001',
7-
};
8-
9-
var util = {
10-
createFile: function (options) {
11-
var buffer = new ArrayBuffer(options.size || 0);
12-
var arr = new Uint8Array(buffer);
13-
[].forEach.call(arr, function (char, i) {
14-
arr[i] = 0;
15-
});
16-
var opt = {};
17-
options.type && (opt.type = options.type);
18-
var blob = new Blob([buffer], options);
19-
return blob;
20-
},
21-
selectLocalFile: function (onChange) {
22-
var id = 'file_selector';
23-
var input = document.createElement('input');
24-
input.style = 'width:0;height:0;border:0;margin:0;padding:0;';
25-
input.type = 'file';
26-
input.id = id;
27-
input.onchange = function (e) {
28-
var files = this.files;
29-
if (!files.length) return;
30-
onChange && onChange(files);
31-
document.body.removeChild(input);
32-
};
33-
document.body.appendChild(input);
34-
input.click();
35-
},
36-
};
37-
38-
// 对更多字符编码的 url encode 格式
39-
var camSafeUrlEncode = function (str) {
40-
return encodeURIComponent(str)
41-
.replace(/!/g, '%21')
42-
.replace(/'/g, '%27')
43-
.replace(/\(/g, '%28')
44-
.replace(/\)/g, '%29')
45-
.replace(/\*/g, '%2A');
46-
};
47-
48-
var getAuthorization = function (options, callback) {
49-
// 格式一、（推荐）后端通过获取临时密钥给到前端，前端计算签名
50-
// 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
51-
// 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
52-
var url = '/sts'; // 如果是 npm run sts.js 起的 nodejs server，使用这个
53-
var xhr = new XMLHttpRequest();
54-
xhr.open('POST', url, true);
55-
xhr.setRequestHeader('Content-Type', 'application/json');
56-
xhr.onload = function (e) {
57-
try {
58-
var data = JSON.parse(e.target.responseText);
59-
var credentials = data.credentials;
60-
} catch (e) {}
61-
if (!data || !credentials) {
62-
return logger.error('credentials invalid:\n' + JSON.stringify(data, null, 2));
63-
}
64-
callback({
65-
TmpSecretId: credentials.tmpSecretId,
66-
TmpSecretKey: credentials.tmpSecretKey,
67-
SecurityToken: credentials.sessionToken,
68-
StartTime: data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
69-
ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
70-
ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
71-
});
72-
};
73-
xhr.send(JSON.stringify(options.Scope));
74-
75-
// // 格式二、（推荐）【细粒度控制权限】后端通过获取临时密钥给到前端，前端只有相同请求才重复使用临时密钥，后端可以通过 Scope 细粒度控制权限
76-
// // 服务端例子：https://github.com/tencentyun/qcloud-cos-sts-sdk/edit/master/scope.md
77-
// // var url = '../server/sts.php'; // 如果起的是 php server 用这个
78-
// var url = '/sts-scope'; // 如果是 npm run sts.js 起的 nodejs server，使用这个
79-
// var xhr = new XMLHttpRequest();
80-
// xhr.open('POST', url, true);
81-
// xhr.setRequestHeader('Content-Type', 'application/json');
82-
// xhr.onload = function (e) {
83-
// try {
84-
// var data = JSON.parse(e.target.responseText);
85-
// var credentials = data.credentials;
86-
// } catch (e) {
87-
// }
88-
// if (!data || !credentials) {
89-
// return logger.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
90-
// };
91-
// callback({
92-
// TmpSecretId: credentials.tmpSecretId,
93-
// TmpSecretKey: credentials.tmpSecretKey,
94-
// SecurityToken: credentials.sessionToken,
95-
// StartTime: data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
96-
// ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
97-
// ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
98-
// });
99-
// };
100-
// xhr.send(JSON.stringify(options.Scope));
101-
102-
// // 格式三、（不推荐，分片上传权限不好控制）前端每次请求前都需要通过 getAuthorization 获取签名，后端使用固定密钥或临时密钥计算签名返回给前端
103-
// // 服务端获取签名，请参考对应语言的 COS SDK：https://cloud.tencent.com/document/product/436/6474
104-
// // 注意：这种有安全风险，后端需要通过 method、pathname 严格控制好权限，比如不允许 put / 等
105-
// var method = (options.Method || 'get').toLowerCase();
106-
// var query = options.Query || {};
107-
// var headers = options.Headers || {};
108-
// var pathname = options.Pathname || '/';
109-
// // var url = 'http://127.0.0.1:3000/auth';
110-
// var url = '../server/auth.php';
111-
// var xhr = new XMLHttpRequest();
112-
// var data = {
113-
// method: method,
114-
// pathname: pathname,
115-
// query: query,
116-
// headers: headers,
117-
// };
118-
// xhr.open('POST', url, true);
119-
// xhr.setRequestHeader('content-type', 'application/json');
120-
// xhr.onload = function (e) {
121-
// try {
122-
// var data = JSON.parse(e.target.responseText);
123-
// } catch (e) {
124-
// }
125-
// if (!data || !data.authorization) return console.error('authorization invalid');
126-
// callback({
127-
// Authorization: data.authorization,
128-
// // SecurityToken: data.sessionToken, // 如果使用临时密钥，需要把 sessionToken 传给 SecurityToken
129-
// });
130-
// };
131-
// xhr.send(JSON.stringify(data));
132-
133-
// // 格式四、（不推荐，适用于前端调试，避免泄露密钥）前端使用固定密钥计算签名
134-
// var authorization = COS.getAuthorization({
135-
// SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 可传固定密钥或者临时密钥
136-
// SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 可传固定密钥或者临时密钥
137-
// Method: options.Method,
138-
// Pathname: options.Pathname,
139-
// Query: options.Query,
140-
// Headers: options.Headers,
141-
// Expires: 900,
142-
// });
143-
// callback({
144-
// Authorization: authorization,
145-
// // SecurityToken: credentials.sessionToken, // 如果使用临时密钥，需要传 SecurityToken
146-
// });
147-
};
148-
149-
var cos = new COS({
150-
getAuthorization: getAuthorization,
151-
UploadCheckContentMd5: true,
152-
});
1531

1542
var TaskId;
1553

156-
var pre = document.querySelector('.result');
157-
var showLogText = function (text, color) {
158-
if (typeof text === 'object') {
159-
try {
160-
text = JSON.stringify(text);
161-
} catch (e) {}
162-
}
163-
var div = document.createElement('div');
164-
div.innerText = text;
165-
color && (div.style.color = color);
166-
pre.appendChild(div);
167-
pre.style.display = 'block';
168-
pre.scrollTop = pre.scrollHeight;
169-
};
170-
171-
var logger = {
172-
log: function (text) {
173-
console.log.apply(console, arguments);
174-
var args = [].map.call(arguments, function (v) {
175-
return typeof v === 'object' ? JSON.stringify(v, null, 2) : v;
176-
});
177-
178-
var logStr = args.join(' ');
179-
180-
if (logStr.length > 1000000) {
181-
logStr = logStr.slice(0, 1000000) + '...content is too long, the first 1000000 characters are intercepted';
182-
}
183-
184-
showLogText(logStr);
185-
},
186-
error: function (text) {
187-
console.error(text);
188-
showLogText(text, 'red');
189-
},
190-
};
191-
1924
function getObjectUrl() {
1935
var url = cos.getObjectUrl(
1946
{
@@ -882,6 +694,7 @@ function describeDocProcessQueues() {
882694

883695
// 更新文档预览队列
884696
function updateDocProcessQueue() {
697+
// 任务所在的队列 ID，请使用查询队列(https://cloud.tencent.com/document/product/460/46946)获取或前往万象控制台(https://cloud.tencent.com/document/product/460/46487)在存储桶中查询
885698
var queueId = 'pa2e2c3d3fae042de909cafc16f1d801b'; // 替换成自己的队列id
886699
var host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com/docqueue/' + queueId;
887700
var url = 'https://' + host;
@@ -929,7 +742,6 @@ function createDocProcessJobs() {
929742
Object: '1/文档转码_${Number}.jpg', // 转码后存到cos的路径
930743
},
931744
},
932-
QueueId: 'pa2e2c3d3fae042de909cafc16f1d801b', // 替换成自己的queueId
933745
},
934746
});
935747
cos.request(
@@ -973,7 +785,6 @@ function describeDocProcessJobs() {
973785
Key: 'doc_jobs',
974786
Url: url,
975787
Query: {
976-
queueId: 'pa2e2c3d3fae042de909cafc16f1d801b', // 替换成自己的queueId
977788
tag: 'DocProcess',
978789
},
979790
},
@@ -1539,6 +1350,7 @@ function getAsrQueue() {
15391350

15401351
// 更新语音识别队列
15411352
function putAsrQueue() {
1353+
// 任务所在的队列 ID，请使用查询队列(https://cloud.tencent.com/document/product/460/46946)获取或前往万象控制台(https://cloud.tencent.com/document/product/460/46487)在存储桶中查询
15421354
var queueId = 'pcc77499e85c311edb9865254008618d9';
15431355
var host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com/asrqueue/' + queueId;
15441356
var url = 'https://' + host;
@@ -1664,6 +1476,7 @@ function describeFileProcessQueues() {
16641476

16651477
// 更新文件处理队列
16661478
function updateFileProcessQueue() {
1479+
// 任务所在的队列 ID，请使用查询队列(https://cloud.tencent.com/document/product/460/46946)获取或前往万象控制台(https://cloud.tencent.com/document/product/460/46487)在存储桶中查询
16671480
var queueId = 'p6160ada105a7408e95aac015f4bf8xxx';
16681481
var host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com/file_queue/' + queueId;
16691482
var url = 'https://' + host;
@@ -1983,6 +1796,7 @@ function describePicProcessQueues() {
19831796

19841797
// 更新图片处理队列
19851798
function updatePicProcessQueue() {
1799+
// 任务所在的队列 ID，请使用查询队列(https://cloud.tencent.com/document/product/460/46946)获取或前往万象控制台(https://cloud.tencent.com/document/product/460/46487)在存储桶中查询
19861800
var queueId = 'p882d181160d84feca27d9376e17c4xxx';
19871801
var host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com/picqueue/' + queueId;
19881802
var url = 'https://' + host;

0 commit comments

Comments
 (0)