欢迎您来到腾讯云!积分商城

腾讯云腾讯云论坛

 找回密码
 立即注册
忘了密码?

扫一扫,访问微社区

快捷导航
搜索
查看: 283|回复: 0

[经验分享] 使用COS-JS-SDK-V5上传文件

[复制链接]

13

主题

0

好友

1710

积分

攻城师[LV3]

Rank: 3Rank: 3Rank: 3

云币
6572
威望
1710
发表于 2018-6-3 20:44:02 |显示全部楼层 |未分类
注意事项:
1.签名为前端生成,这种方式的签名不安全,建议使用临时密钥。
2.必须要配置跨域访问,否则无法上传成功。
3.cos-js-sdk-v5.min.js文件一定要存放正确位置,否则页面可能找不到该文件,导致无法上传文件。

具体步骤:
1.配置对象存储的跨域访问。
2.png

2.下载cos-js-sdk-v5所有文件内容到云服务器上,存放到网站根目录。
下载链接:https://github.com/tencentyun/cos-js-sdk-v5
1.png

3.在网站根目录添加cos-js-sdk-v5.html文件,将以下代码填写进去,注意修改相关的参数,主要修改里面的Bucket、Region、SecretId、SecretKey参数。
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. </head>
  6. <body>

  7. <h1>COS-JS-SDK-V5 上传</h1>

  8. <input id="fileSelector" type="file">
  9. <input id="submitBtn" type="submit">

  10. <!-- 引用cos-js-sdk-v5.min.js文件 -->
  11. <script src="cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

  12. <div id="msg"></div>

  13. <script>
  14.     (function () {
  15.         // 请求用到的参数
  16.         var Bucket = '468574580-1250000000'; // 存储桶名称,需修改
  17.         var Region = 'ap-shanghai'; // 地域
  18.         var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
  19.         var prefix = protocol + '//' + Bucket + '.cos.' + Region + '.myqcloud.com/';
  20.         // 计算签名
  21.         var getAuthorization = function (options, callback) {
  22.             // 前端使用固定密钥计算签名(适用于前端调试,为了安全性,建议使用临时密钥生成签名)
  23.             // 临时密钥参考链接:https://github.com/tencentyun/cos-js-sdk-v5
  24.             var authorization = COS.getAuthorization({
  25.                 SecretId: 'AKIDNYU9Ygu9ZjdHfmLKkusc7MPEXXXXX',  // 你的固定密钥SecretId,需修改
  26.                 SecretKey: 'pTt65pJcqqb6MN9fwykHZaLp3XX',  // 你的固定密钥SecretKey,需修改
  27.                 Method: options.Method,
  28.                 Key: options.Key,
  29.                 Query: options.Query,
  30.                 Headers: options.Headers,
  31.             });
  32.             callback(null, {
  33.                 Authorization: authorization,
  34.             });
  35.         };
  36.         // 上传文件
  37.         var uploadFile = function (file, callback) {
  38.             var Key = 'upload/' + file.name; // 这里指定上传目录和文件名,可根据情况修改
  39.             getAuthorization({Method: 'PUT', Key: Key}, function (err, info) {
  40.                 if (err) {
  41.                     alert(err);
  42.                     return;
  43.                 }
  44.                 var auth = info.Authorization;
  45.                 //var XCosSecurityToken = info.XCosSecurityToken; // 使用固定密钥不需要此参数,临时密钥才需要
  46.                 var url = prefix + Key;
  47.                 var xhr = new XMLHttpRequest();
  48.                 xhr.open('PUT', url, true);
  49.                 xhr.setRequestHeader('Authorization', auth);
  50.                 //XCosSecurityToken && xhr.setRequestHeader('x-cos-security-token', XCosSecurityToken); // 使用固定密钥不需要此参数,临时密钥才需要
  51.                 xhr.onload = function () {
  52.                     if (xhr.status === 200 || xhr.status === 206) {
  53.                         var ETag = xhr.getResponseHeader('etag');
  54.                         callback(null, {url: url, ETag: ETag});
  55.                     } else {
  56.                         callback('文件 ' + Key + ' 上传失败,状态码:' + xhr.status);
  57.                     }
  58.                 };
  59.                 xhr.onerror = function () {
  60.                     callback('文件 ' + Key + ' 上传失败,请检查是否没配置 CORS 跨域规则');
  61.                 };
  62.                 xhr.send(file);
  63.             });
  64.         };
  65.         // 监听表单提交
  66.         document.getElementById('submitBtn').onclick = function (e) {
  67.             var file = document.getElementById('fileSelector').files[0];
  68.             if (!file) {
  69.                 document.getElementById('msg').innerText = '未选择上传文件';
  70.                 return;
  71.             }
  72.             file && uploadFile(file, function (err, data) {
  73.                 console.log(err || data);
  74.                 //document.getElementById('msg').innerText = err ? err : ('上传成功,ETag=' + data.ETag);
  75.                 document.getElementById('msg').innerText = err ? err : ('上传成功,ETag=' + data.ETag + ' URL=' + data.url);
  76.             });
  77.         };
  78.     })();
  79. </script>

  80. </body>
  81. </html>
复制代码
4.访问cos-js-sdk-v5.html文件,测试上传文件。
3.png

4.png




您需要登录后才可以回帖 登录 | 立即注册
您需要登录后才可以发帖 QQ登录

联系我们|腾讯云平台|积分商城|腾讯云官方论坛    

GMT+8, 2018-7-23 19:36 , Processed in 1.197144 second(s), 32 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部