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

腾讯云腾讯云论坛

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

扫一扫,访问微社区

快捷导航
搜索
查看: 230|回复: 4

[经验分享] Web端直传实践(PHP)

[复制链接]

3

主题

0

好友

640

积分

程序猿[LV2]

Rank: 2Rank: 2

云币
2542
威望
640
发表于 2017-12-26 14:20:40 |显示全部楼层 |未分类
系统环境
系统:CentOS 7.3
软件:Apache 2.4.6 PHP 5.4.16
网站根目录:/var/www/html
auth.php文件存放位置:/var/www/html/auth.php
ajax.html文件存放位置:/var/www/html/ajax.html
from.html文件存放位置:/var/www/html/from.html

XML API的PostObject 接口
https://cloud.tencent.com/doc/product/436/7751
参考链接
https://cloud.tencent.com/document/product/436/9067

方案A
1.设置COS的跨域访问CORS规则,参考下图配置,为了方便,直接使用*来代替
图片1.png

2.修改auth.php文件中的SecretID和SecretKey参数
2.png
3.修改ajax.html文件中的Bucket和Region参数
3.png
4.启动httpd服务,然后访问ajax.html
4.png
5.上传文件
5.png
6.png


方案B
1.设置COS的跨域访问CORS规则,参考下图配置,为了方便,直接使用*来代替
图片1.png
2.修改auth.php文件中的SecretID和SecretKey参数
2.png
3.修改from.html文件中的Bucket和Region参数
7.png
4.启动httpd服务,然后访问from.html
8.png
5.上传文件
9.png

10.png



3

主题

0

好友

640

积分

程序猿[LV2]

Rank: 2Rank: 2

云币
2542
威望
640
发表于 2017-12-26 17:58:33 |显示全部楼层
auth.php文件内容如下:
  1. <?php
  2. /**
  3. * php 签名样例
  4. * @param string $method 请求类型 method
  5. * @param string $pathname 文件名称
  6. * @return string 签名字符串
  7. */
  8. function getAuthorization($method, $pathname)
  9. {
  10.     // 获取个人 API 密钥 <a  target="_blank">https://console.qcloud.com/capi</a>
  11.     $SecretId = 'XXXXXXXXXXXXXX';
  12.     $SecretKey = 'XXXXXXXXXXXXX';
  13.     // 整理参数
  14.     $queryParams = array();
  15.     $headers = array();
  16.     $method = strtolower($method ? $method : 'get');
  17.     $pathname = $pathname ? $pathname : '/';
  18.     substr($pathname, 0, 1) != '/' && ($pathname = '/' . $pathname);
  19.     // 工具方法
  20.     function getObjectKeys($obj)
  21.     {
  22.         $list = array_keys($obj);
  23.         sort($list);
  24.         return $list;
  25.     }
  26.     function obj2str($obj)
  27.     {
  28.         $list = array();
  29.         $keyList = getObjectKeys($obj);
  30.         $len = count($keyList);
  31.         for ($i = 0; $i < $len; $i++) {
  32.             $key = $keyList[$i];
  33.             $val = isset($obj[$key]) ? $obj[$key] : '';
  34.             $key = strtolower($key);
  35.             $list[] = rawurlencode($key) . '=' . rawurlencode($val);
  36.         }
  37.         return implode('&', $list);
  38.     }
  39.     // 签名有效起止时间
  40.     $now = time() - 1;
  41.     $expired = $now + 600; // 签名过期时刻,600 秒后
  42.     // 要用到的 Authorization 参数列表
  43.     $qSignAlgorithm = 'sha1';
  44.     $qAk = $SecretId;
  45.     $qSignTime = $now . ';' . $expired;
  46.     $qKeyTime = $now . ';' . $expired;
  47.     $qHeaderList = strtolower(implode(';', getObjectKeys($headers)));
  48.     $qUrlParamList = strtolower(implode(';', getObjectKeys($queryParams)));
  49.     // 签名算法说明文档:<a  target="_blank">https://www.qcloud.com/document/product/436/7778</a>
  50.     // 步骤一:计算 SignKey
  51.     $signKey = hash_hmac("sha1", $qKeyTime, $SecretKey);
  52.     // 步骤二:构成 FormatString
  53.     $formatString = implode("\n", array(strtolower($method), $pathname, obj2str($queryParams), obj2str($headers), ''));
  54.     // 步骤三:计算 StringToSign
  55.     $stringToSign = implode("\n", array('sha1', $qSignTime, sha1($formatString), ''));
  56.     // 步骤四:计算 Signature
  57.     $qSignature = hash_hmac('sha1', $stringToSign, $signKey);
  58.     // 步骤五:构造 Authorization
  59.     $authorization = implode('&', array(
  60.         'q-sign-algorithm=' . $qSignAlgorithm,
  61.         'q-ak=' . $qAk,
  62.         'q-sign-time=' . $qSignTime,
  63.         'q-key-time=' . $qKeyTime,
  64.         'q-header-list=' . $qHeaderList,
  65.         'q-url-param-list=' . $qUrlParamList,
  66.         'q-signature=' . $qSignature
  67.     ));
  68.     return $authorization;
  69. }
  70. $method = isset($_GET['method']) ? $_GET['method'] : 'POST';
  71. $pathname = isset($_GET['pathname']) ? $_GET['pathname'] : '/';
  72. echo getAuthorization($method, $pathname);
  73. ?>
复制代码
回复

使用道具 举报

3

主题

0

好友

640

积分

程序猿[LV2]

Rank: 2Rank: 2

云币
2542
威望
640
发表于 2017-12-26 18:01:42 |显示全部楼层
ajax.html文件内容如下:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Ajax 上传</title>
  6.     <style>h1, h2 {font-weight: normal;}#msg {margin-top:10px;}</style>
  7. </head>
  8. <body>

  9. <h1>Ajax 上传</h1>

  10. <form id="form">
  11.     <input id="file" type="file">
  12.     <input type="submit">
  13. </form>

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

  15. <script>
  16.     (function () {

  17.         // 指定存储桶
  18.         var Bucket = 'XXXXX';
  19.         var Region = 'XXXXX';
  20.         var prefix = 'http://' + Bucket + '.cos.' + Region + '.myqcloud.com/';

  21.         // 计算签名
  22.         var getAuthorization = function (options, callback) {
  23.             var method = (options.Method || 'get').toLowerCase();
  24.             var key = options.Key || '';
  25.             var pathname = key.indexOf('/') === 0 ? key : '/' + key;
  26.                         // 注意这里的auth.php文件位置
  27.             var url = 'auth.php?method=' + method + '&pathname=' + encodeURIComponent(pathname);
  28.             var xhr = new XMLHttpRequest();
  29.             xhr.open('GET', url, true);
  30.             xhr.onload = function (e) {
  31.                 callback(null, e.target.responseText);
  32.             };
  33.             xhr.onerror = function (e) {
  34.                 callback('获取签名出错');
  35.             };
  36.             xhr.send();
  37.         };

  38.         // 上传文件
  39.         var uploadFile = function (file, callback) {
  40.             var Key = file.name;
  41.             getAuthorization({Method: 'PUT', Key: Key}, function (err, auth) {
  42.                 var url = prefix + Key;
  43.                 var xhr = new XMLHttpRequest();
  44.                 xhr.open('PUT', url, true);
  45.                 xhr.setRequestHeader('Authorization', auth);
  46.                 xhr.onload = function () {
  47.                     if (xhr.status === 200 || xhr.status === 206) {
  48.                         var ETag = xhr.getResponseHeader('etag');
  49.                         callback(null, {url: url, ETag: ETag});
  50.                     } else {
  51.                         callback('文件 ' + Key + ' 上传失败,状态码:' + xhr.status);
  52.                     }
  53.                 };
  54.                 xhr.onerror = function () {
  55.                     callback('文件 ' + Key + ' 上传失败,请检查是否没配置 CORS 跨域规则');
  56.                 };
  57.                 xhr.send(file);
  58.             });
  59.         };

  60.         // 监听表单提交
  61.         document.getElementById('form').onsubmit = function (e) {
  62.             var file = document.getElementById('file').files[0];
  63.             file && uploadFile(file, function (err, data) {
  64.                 console.log(err || data);
  65.                 document.getElementById('msg').innerText = err ? err : ('上传成功,ETag=' + data.ETag);
  66.             });
  67.             e.preventDefault();
  68.         };
  69.     })();
  70. </script>

  71. </body>
  72. </html>
复制代码
回复

使用道具 举报

5

主题

39

好友

2万

积分

超级版主

军哥

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

云币
16013
威望
20830
发表于 2017-12-27 00:16:07 |显示全部楼层
非常不错,感谢分享.
回复

使用道具 举报

3

主题

0

好友

640

积分

程序猿[LV2]

Rank: 2Rank: 2

云币
2542
威望
640
发表于 2017-12-27 10:46:07 |显示全部楼层
from.html文件内容如下:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Form 表单上传</title>
  6.     <style>h1, h2 {font-weight: normal;}#msg {margin-top:10px;}</style>
  7.     <script src="jquery-1.12.4.js"></script>
  8. </head>
  9. <body>

  10. <h1>Form 表单上传</h1>

  11. <form id="form" target="submitTarget" action="" method="post" enctype="multipart/form-data" accept="*/*">
  12.     <input id="name" name="name" type="hidden" value="">
  13.     <input name="success_action_status" type="hidden" value="200">
  14.     <input id="success_action_redirect" name="success_action_redirect" type="hidden" value="">
  15.     <input id="key" name="key" type="hidden" value="">
  16.     <input id="Signature" name="Signature" type="hidden" value="">
  17.     <input id="fileSelector" name="file" type="file">
  18.     <input id="submitBtn" type="button" value="提交">
  19. </form>
  20. <iframe id="submitTarget" name="submitTarget" style="display:none;" frameborder="0"></iframe>

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

  22. <script>
  23.     (function () {

  24.         // 请求用到的参数
  25.         var Bucket = 'XXXXXXXXXXX';
  26.         var Region = 'XXXXXXXXXXX';
  27.         var prefix = 'http://' + Bucket + '.cos.' + Region + '.myqcloud.com/';
  28.         var form = document.getElementById('form');
  29.         form.action = prefix;

  30.         // 计算签名
  31.         var getAuthorization = function (options, callback) {
  32.             var method = (options.Method || 'get').toLowerCase();
  33.             var key = options.Key || '';
  34.             var pathname = key.indexOf('/') === 0 ? key : '/' + key;
  35.             var url = 'auth.php?method=' + method + '&pathname=' + encodeURIComponent(pathname);
  36.             var xhr = new XMLHttpRequest();
  37.             xhr.open('GET', url, true);
  38.             xhr.onreadystatechange = function (e) {
  39.                 if (xhr.readyState === 4) {
  40.                     xhr.status === 200 ? callback(null, xhr.responseText) : callback('获取签名出错');
  41.                 }
  42.             };
  43.             xhr.send();
  44.         };

  45.         // 监听上传完成
  46.         var Key;
  47.         var submitTarget = document.getElementById('submitTarget');
  48.         var showMessage = function (err, data) {
  49.             console.log(err || data);
  50.             document.getElementById('msg').innerText = err ? err : ('上传成功,ETag=' + data.ETag);
  51.         };
  52.         submitTarget.onload = function () {
  53.             var search;
  54.             try {
  55.                 search = submitTarget.contentWindow.location.search.substr(1);
  56.             } catch (e) {
  57.                 showMessage('文件 ' + Key + ' 上传失败');
  58.             }
  59.             if (search) {
  60.                 var items = search.split('&');
  61.                 var i, arr, data = {};
  62.                 for (i = 0; i < items.length; i++) {
  63.                     arr = items[i].split('=');
  64.                     data[arr[0]] = decodeURIComponent(arr[1] || '');
  65.                 }
  66.                 showMessage(null, {url: prefix + Key, ETag: data.etag});
  67.             } else {
  68.             }
  69.         };

  70.         // 发起上传
  71.         document.getElementById('submitBtn').onclick = function (e) {
  72.             var filePath = document.getElementById('fileSelector').value;
  73.             if (!filePath) {
  74.                 document.getElementById('msg').innerText = '未选择上传文件';
  75.                 return;
  76.             }
  77.             Key = filePath.match(/[\\\/]?([^\\\/]+)$/)[1];
  78.             getAuthorization({Method: 'POST', Key: '/'}, function (err, auth) {
  79.                 // 在当前目录下放一个空的 empty.html 以便让接口上传完成跳转回来
  80.                 document.getElementById('success_action_redirect').value = location.href.substr(0, location.href.lastIndexOf('/') + 1) + 'empty.html';
  81.                 document.getElementById('key').value = Key;
  82.                 document.getElementById('Signature').value = auth;
  83.                 form.submit();
  84.             });
  85.         };
  86.     })();
  87. </script>

  88. </body>
  89. </html>
复制代码
回复

使用道具 举报

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

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

GMT+8, 2018-2-19 22:17 , Processed in 1.203486 second(s), 37 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部