Skip to content

Commit 52729cb

Browse files
committed
update csg doc
1 parent e4d3d11 commit 52729cb

File tree

5 files changed

+2354
-209
lines changed

5 files changed

+2354
-209
lines changed

csp/README.md

+4-86
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,7 @@
1-
# CSP 使用 COS JavaScript SDK
1+
# COS JavaScript SDK 私有化使用文档
22

3-
### SDK 获取
3+
[快速入门](./start.md)
44

5-
对象存储服务的 XML JS SDK 资源 github 地址:[tencentyun/cos-js-sdk-v5](https://github.com/tencentyun/cos-js-sdk-v5)
5+
[API 文档](./api.md)
66

7-
演示示例 Demo 下载地址:[XML JS SDK CSP Demo](https://github.com/tencentyun/cos-js-sdk-v5/tree/master/csp/csp.html)
8-
9-
### 开发准备
10-
11-
1. 首先,JS SDk 需要浏览器支持基本的 HTML5 特性,以便支持 ajax 上传文件和计算文件 md5 值。
12-
2. 到COS 对象存储控制台创建存储桶,得到 Bucket(存储桶名称) 和 Region(地域名称)
13-
3. 到控制台密钥管理获取您的项目 SecretId 和 SecretKey。
14-
4. 配置 CORS 规则,配置例子如下图:
15-
![cors](//mc.qcloudimg.com/static/img/2e7791e9274ce3ebf8b25bbeafcd7b45/image.png)
16-
17-
> 关于文章中出现的 SecretId、SecretKey、Bucket 等名称的含义和获取方式请参考:[COS 术语信息](https://cloud.tencent.com/document/product/436/7751)
18-
19-
## 快速入门
20-
### 计算签名
21-
22-
由于签名计算放在前端会暴露 SecretId 和 SecretKey,我们把签名计算过程放在后端实现,前段通过 ajax 向后端获取签名结果,正式部署时请再后端加一层自己网站本身的权限检验。其他语言,请参照对应的 [XML SDK](https://cloud.tencent.com/document/product/436/6474) 文档。
23-
24-
25-
### 上传例子
26-
27-
1. 创建 test.html,填入下面的代码,修改里面的 Bucket 和 Region。
28-
2. 部署好后端的签名服务,并修改 getAuthorization 里的签名服务地址。
29-
3. 把 test.html 放在 Web 服务器下,然后在浏览器访问页面,测试文件上传。
30-
31-
```html
32-
<input id="file-selector" type="file">
33-
<script src="dist/cos-js-sdk-v5.min.js"></script>
34-
<script>
35-
var Bucket = 'test-1250000000';
36-
var Region = 'ap-guangzhou';
37-
38-
// 初始化实例
39-
var cos = new COS({
40-
CompatibilityMode: true,
41-
ServiceDomain: 'http://cos.default.xxx.com', // 这里替换成 getService 域名
42-
Domain: 'http://{Bucket}.cos.{Region}.xxx.com', 这里替换成 API 域名格式模板
43-
getAuthorization: function (options, callback) {
44-
// 异步获取签名
45-
$.get('../server/sts.php', {
46-
bucket: options.Bucket,
47-
region: options.Region,
48-
}, function (data) {
49-
callback({
50-
TmpSecretId: data.TmpSecretId,
51-
TmpSecretKey: data.TmpSecretKey,
52-
XCosSecurityToken: data.XCosSecurityToken,
53-
ExpiredTime: data.ExpiredTime,
54-
});
55-
});
56-
}
57-
});
58-
59-
// 监听选文件
60-
document.getElementById('file-selector').onchange = function () {
61-
62-
var file = this.files[0];
63-
if (!file) return;
64-
65-
// 分片上传文件
66-
cos.sliceUploadFile({
67-
Bucket: Bucket,
68-
Region: Region,
69-
Key: file.name,
70-
Body: file,
71-
}, function (err, data) {
72-
console.log(err, data);
73-
});
74-
75-
};
76-
</script>
77-
```
78-
79-
## webpack 引入方式
80-
81-
支持 webpack 打包的场景,可以用 npm 引入作为模块
82-
```shell
83-
npm i cos-js-sdk-v5 --save
84-
```
85-
86-
## 其他文档和例子
87-
88-
1. 更多例子请参阅 [XML JavaScript SDK Demo](https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo)
89-
2. 完整接口文档请参阅 [XML JavaScript SDK 接口文档](https://cloud.tencent.com/document/product/436/12260)
7+
[示例代码](./csp.html)

0 commit comments

Comments
 (0)