快速入门

最近更新时间:2018-12-29 18:24:08

查看pdf

开发准备

SDK 获取

对象存储服务的 XML JS SDK 资源 github 地址:tencentyun/cos-js-sdk-v5

演示示例 Demo 下载地址:XML JS SDK Demo

开发准备

  1. JS SDK 需要浏览器支持基本的 HTML5 特性,以便支持 ajax 上传文件和计算文件 md5 值。
  2. COS 对象存储控制台 创建存储桶,得到 Bucket(存储桶名称) 和 Region(地域名称)。
  3. 控制台密钥管理 获取您的项目 SecretId 和 SecretKey。
  4. 配置 CORS 规则,配置例子如下图所示。
    cors

说明:

关于文章中出现的 SecretId、SecretKey、Bucket 等名称的含义和获取方式请参考:COS 术语信息

快速入门

获取临时密钥

由于密钥放在前端会暴露 SecretId 和 SecretKey,我们把永久密钥过程放在后端,前端通过 ajax 向后端获取一个临时密钥,正式部署时请再后端加一层自己网站本身的权限检验。具体内容可参考 临时密钥生成及使用指引 文档。

上传例子

  1. 创建 test.html,填入如下代码,修改里面的 Bucket 和 Region。
  2. 部署好后端的临时密钥服务,并修改 getAuthorization 里的密钥服务地址。
  3. 把 test.html 放在 Web 服务器下,然后在浏览器访问页面,测试文件上传。

test.html 文件示例代码如下:

<input id="file-selector" type="file">
<script src="dist/cos-js-sdk-v5.min.js"></script>
<script>
var Bucket = 'test-1250000000';
var Region = 'ap-guangzhou';

// 初始化实例
var cos = new COS({
    getAuthorization: function (options, callback) {
        // 异步获取临时密钥
        $.get('../server/sts.php', {
            bucket: options.Bucket,
            region: options.Region,
        }, function (data) {
            callback({
                 TmpSecretId: data.credentials.tmpSecretId, 
                 TmpSecretKey: data.credentials.tmpSecretKey, 
                 XCosSecurityToken: data.credentials.sessionToken, 
                 ExpiredTime: data.expiredTime
            });
        });
    }
});

// 监听选文件
document.getElementById('file-selector').onchange = function () {

    var file = this.files[0];
    if (!file) return;

    // 分片上传文件
    cos.sliceUploadFile({
        Bucket: Bucket,
        Region: Region,
        Key: file.name,
        Body: file,
    }, function (err, data) {
        console.log(err, data);
    });

};
</script>

webpack 引入方式

支持 webpack 打包的场景,您可以用 npm 引入作为模块,代码如下。

npm i cos-js-sdk-v5 --save

其他文档和例子

  1. 更多例子请参阅 XML JavaScript SDK Demo
  2. 完整接口文档请参阅 XML JavaScript SDK 接口文档

如果有其他疑问,您也可以在问答社区中寻求帮助。前往问答社区 >