|
1 |
| -# CSP 使用 COS JavaScript SDK |
| 1 | +# COS JavaScript SDK 私有化使用文档 |
2 | 2 |
|
3 |
| -### SDK 获取 |
| 3 | +[快速入门](./start.md) |
4 | 4 |
|
5 |
| -对象存储服务的 XML JS SDK 资源 github 地址:[tencentyun/cos-js-sdk-v5](https://github.com/tencentyun/cos-js-sdk-v5)。 |
| 5 | +[API 文档](./api.md) |
6 | 6 |
|
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 |
| - |
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