前提条件
登录腾讯云COS 控制台并创建存储桶，得到 Bucket（存储桶名称） 和 Region（地域名称），详情请参见创建存储桶文档。
进入存储桶详情页，单击安全管理页签。下拉页面找到跨域访问CORS设置配置项，单击添加规则，配置示例如下图，详情请参见设置跨域访问文档。
登录访问管理控制台， 获取您的项目 SecretId 和 SecretKey。
注意：
腾讯云COS特惠活动，新人1元起，还有更多好礼等你来揭晓！
实践步骤
注意：
正式部署时服务端请加一层您的网站本身的权限检验。
获取临时密钥和计算签名
出于安全考虑，签名使用临时密钥，服务端搭建临时密钥服务，可参考PHP 示例、Nodejs 示例。
如有其他语言或自行实现可以参考以下流程：
向服务端获取临时密钥，服务端首先使用固定密钥 SecretId、SecretKey 向 STS 服务获取临时密钥，得到临时密钥 tmpSecretId、tmpSecretKey、sessionToken，详情请参考临时密钥生成及使用指引或cos-sts-sdk文档。
前端通过 tmpSecretId、tmpSecretKey，以及 method、pathname 计算签名，可参考下文使用cos-auth.js来计算签名，如果业务需要也可以放在后端计算签名。
如果使用 PutObject 接口上传文件，将计算得到的签名和 sessionToken，分别放到发请求时 header 的 authorization 和 x-cos-security-token 字段里。
如果使用 PostObject 接口上传文件，则将计算得到的签名和 sessionToken，分别放到发请求时表单的 Signature 和 x-cos-security-token 字段里。
前端上传
方案 A：使用 AJAX 上传
AJAX 上传需要浏览器支持基本的 HTML5 特性，当前方案使用PUT Object 文档，操作指引如下：
按照前提条件的步骤，准备存储桶的相关配置。
创建test.html文件，修改下方代码的 Bucket 和 Region，并复制到test.html文件。
部署后端的签名服务，并修改test.html里的签名服务地址。
将test.html放在 Web 服务器下，并通过浏览器访问页面，测试文件上传功能。
Ajax Put 上传h1,h2{font-weight: normal; }#msg{margin-top:10px; }
Ajax Put 上传
(function() {// 请求用到的参数varBucket='examplebucket-1250000000';varRegion='ap-guangzhou';varprotocol = location.protocol==='https:'?'https:':'http:';varprefix = protocol +'//'+Bucket+'.cos.'+Region+'.myqcloud.com/';// prefix 用于拼接请求 url 的前缀，域名使用存储桶的默认域名// 对更多字符编码的 url encode 格式varcamSafeUrlEncode =function(str) {returnencodeURIComponent(str) .replace(/!/g,'%21') .replace(/'/g,'%27') .replace(/\(/g,'%28') .replace(/\)/g,'%29') .replace(/\*/g,'%2A'); };// 计算签名vargetAuthorization =function(options, callback) {// var url = 'http://127.0.0.1:3000/sts-auth' +varurl ='../server/sts.php';varxhr =newXMLHttpRequest(); xhr.open('GET', url,true); xhr.onload=function(e) {varcredentials;try{ credentials = (newFunction('return '+ xhr.responseText))().credentials; }catch(e) {}if(credentials) {callback(null, {SecurityToken: credentials.sessionToken,Authorization:CosAuth({SecretId: credentials.tmpSecretId,SecretKey: credentials.tmpSecretKey,Method: options.Method,Pathname: options.Pathname, }) }); }else{console.error(xhr.responseText);callback('获取签名出错'); } }; xhr.onerror=function(e) {callback('获取签名出错'); }; xhr.send(); };// 上传文件varuploadFile =function(file, callback) {varKey='dir/'+ file.name;// 这里指定上传目录和文件名getAuthorization({Method:'PUT',Pathname:'/'+Key},function(err, info) {if(err) {alert(err);return; }varauth = info.Authorization;varSecurityToken= info.SecurityToken;varurl = prefix +camSafeUrlEncode(Key).replace(/%2F/g,'/');varxhr =newXMLHttpRequest(); xhr.open('PUT', url,true); xhr.setRequestHeader('Authorization', auth);SecurityToken&& xhr.setRequestHeader('x-cos-security-token',SecurityToken); xhr.upload.onprogress=function(e) {console.log('上传进度 '+ (Math.round(e.loaded/ e.total*10000) /100) +'%'); }; xhr.onload=function() {if(/^2\d\d$/.test(''+ xhr.status)) {varETag= xhr.getResponseHeader('etag');callback(null, {url: url,ETag:ETag}); }else{callback('文件 '+Key+' 上传失败，状态码：'+ xhr.status); } }; xhr.onerror=function() {callback('文件 '+Key+' 上传失败，请检查是否没配置 CORS 跨域规则'); }; xhr.send(file); }); };// 监听表单提交document.getElementById('submitBtn').onclick=function(e) {varfile =document.getElementById('fileSelector').files[0];if(!file) {document.getElementById('msg').innerText='未选择上传文件';return; } file &&uploadFile(file,function(err, data) {console.log(err || data);document.getElementById('msg').innerText= err ? err : ('上传成功，ETag='+ data.ETag); }); }; })();执行效果如下图：
方案 B：使用 Form 表单上传
Form 表单上传支持低版本的浏览器的上传（如 IE8），当前方案使用Post Object 接口。操作指引：
按照前提条件的步骤，准备存储桶。
创建test.html文件，修改下方代码的 Bucket 和 Region，并复制到test.html文件。
部署后端的签名服务，并修改test.html里的签名服务地址。
在test.html同一个目录下，创建一个空的empty.html，用于上传成功时跳转回来。
将test.html和empty.html放在 Web 服务器下，并通过浏览器访问页面，测试文件上传功能。
Form 表单简单上传h1,h2{font-weight: normal;}#msg{margin-top:10px;}
Form 表单简单上传（兼容 IE8）
执行效果如下图：
