如何用Baas快速在騰訊雲上開發小程式-系列3 :實現騰訊雲COS API呼叫
一、實驗簡介
本實驗通過呼叫騰訊雲物件儲存(COS)介面,實現將圖片上傳到指定的 Bucket 功能;同時封裝圖片上傳介面,用於上傳商品圖片。
二、實驗目標
- 掌握 RESTFul API 介面呼叫和除錯方法
- 掌握 RESTFul API 封裝方法
三、實驗步驟
3.1 新增雲應用
第一步: clone xqcloud 專案
1. cd <your project path>
2. git clone https://git.oschina.net/xpmjs/xqcloud.git xqcloud
第二步: 修改遠端倉庫地址,提交到遠端倉庫
1. git remote remove origin
2. git remote add origin ssh://[email protected]:2222/source/xqcloud.git
3. git push origin master
3.2 呼叫 COS API,實現檔案上傳功能
第一步: 編寫 Cos Model vi xqcloud/model/Cos.php
1. <?php
2. use \Tuanduimao\Mem as Mem;
3. use \Tuanduimao\Excp as Excp;
4. use \Tuanduimao\Err as Err;
5. use \Tuanduimao \Conf as Conf;
6. use \Tuanduimao\Model as Model;
7. use \Tuanduimao\Utils as Utils;
8. use \Tuanduimao\Loader\App as App;
9. /**
10. * cos物件儲存11. */
12. class CosModel {
13. function __construct( $opt=[] ) {
14. $this->appid = isset($opt['appid']) ? $opt['appid'] : "";
15. $this->bucket = isset($opt['bucket' ]) ? $opt['bucket'] : "";
16. $this->SecretID = isset($opt['SecretID']) ? $opt['SecretID'] : "";
17. $this->SecretKey = isset($opt['SecretKey']) ? $opt['SecretKey'] : "";
18. }
19. /**
20. * 簽名
21. * @param array $opt [description]
22. * @return [type] [description]
23. */
24. function sign( $opt=[] ) {
25. $randstr= $this->generateId(10);
26. $t = isset($opt['e']) ? time()+86400 : 0;
27. $a = isset($opt['appid']) ? $opt['appid'] : $this->appid;
28. $b = isset($opt['bucket']) ? $opt['bucket'] : $this->bucket;
29. $k = isset($opt['SecretID']) ? $opt['SecretID'] : $this->SecretID;
30. $e = isset($opt['e']) ? $opt['e'] : time()+3600;
31. $SecretKey = isset($opt['SecretKey']) ? $opt['SecretKey'] : $this->SecretKey;
32. $s = [
33. "a" => $a,
34. "b" => $b,
35. "k" => $k,
36. "e" => $e,
37. "t" => time(),
38. "r" => $randstr,
39. "f" =>$opt['file'],
40. ];
41. // 拼接字串
42. $orignal = "a={$s['a']}&k={$s['k']}&e={$s['e']}&t={$s['t']}&r={$s['r']}&f={$s['f']}&b={$s['b']}";
43. $signTmp = hash_hmac( 'SHA1', $orignal, $SecretKey , true );
44. $sign = base64_encode($signTmp.$orignal);
45. return $sign;
46. }
47.
48. /**
49. * 檔案轉.字串
50. * @param [type] $imageUrl [description]
51. * @param array $opt [description]
52. * @return [type] [description]
53. */
54. function uploadByUrl( $imageUrl, $opt=[] ) {
55. $imageData = file_get_contents( $imageUrl );
56. return $this->upload( $imageData, $opt );
57. }
58.
59. /**
60. * 檔案上傳61. * @param [type] $imageData [description]
62. * @param array $opt [description]
63. * @return [type] [description]S
64. */
65. function upload( $imageData, $opt=[] ){
66. // 生成隨機數
第二步: 編寫測試用控制器 vi xqcloud/controller/Cos.php
1. <?php
2. use \Tuanduimao\Loader\App as App;
3. use \Tuanduimao\Utils as Utils;
4. use \Tuanduimao\Tuan as Tuan;
5. use \Tuanduimao\Excp as Excp;
6. use \Tuanduimao\Conf as Conf;
7.
8. class CosController extends \Tuanduimao\Loader\Controller {
9.
10. function __construct() {
11. }
12.
13. function tryit() {
14.
15. $config = [
16. 'region'=>'<tj/sh/gd>',
17. 'appid'=>'<your appid>',
18. 'bucket'=>'<your bucket>',
19. 'SecretID'=>"<your SecretID>",
20. 'SecretKey'=>"<your SecretKey>"
21. ];
22. $cos = App::M('Cos',$config);
23. $content =file_get_contents("http://7xleg1.com1.z0.glb.clouddn.com/x1/2/lab/uploadit.jpg");
24. $resp = $cos->upload( $content, ['region'=>$config['region'], '
filetype'=>'jpg'] );
25. Utils::out($resp);
26. }
27.
28. }
第三步: 提交程式碼並更新線上
1. git add *
2. git commit -m '+COS Tryit {{pull}}' # {{pull}} feed 指令更新線上程式碼
3. git push
第五步: 登入雲主機,執行測試
1. docker exec -it xpmjs-server /bin/bash # 進入容器
2. tdm app run /apps/xqcloud/controller/Cos.php tryit # 執行測試
3.3 封裝圖片上傳介面
第一步: 建立配置檔案 vi xqcloud/config.php
1. <?php
2. $GLOBALS['_QC'] = [
3. 'cos'=>[
4. 'region'=>'<tj/sh/gd>',
5. 'appid'=>'<your appid>',
6. 'bucket'=>'<your bucket>',
7. 'SecretID'=>"<your SecretID>",
8. 'SecretKey'=>"<your SecretKey>"
9. ]
10. ];
第二步: 修改控制器 vi xqcloud/controller/Cos.php
1. <?php
2. require_once(__DIR__ . '/../config.php');
3. use \Tuanduimao\Loader\App as App;
4. use \Tuanduimao\Utils as Utils;
5. use \Tuanduimao\Tuan as Tuan;
6. use \Tuanduimao\Excp as Excp;
7. use \Tuanduimao\Conf as Conf;
8.
9. class CosController extends \Tuanduimao\Loader\Controller {
10.
11. function __construct() {
12. }
13.
14. /**
15. * 上傳檔案介面
16. * @return [type] [description]
17. */
18. function upload() {
19.
20. $file = !empty($_FILES['wxfile']) ? $_FILES['wxfile'] : [];
21. $content = !empty($file['content']) ?base64_decode($file['content']) : NULL;
22. $filetype = Utils::mimes()->getExtension($file['type']);
23.
24. if ( $content == null ) {
25. echo (new Excp("未接收到檔案", 502, ['_FILES'=>$_FILES]))->toJSON();
26. return;
27. }
28.
29. $config = $GLOBALS['_QC']['cos'];
30. $cos = App::M('Cos',$config);
31. try {
32. $resp = $cos->upload( $content, ['region'=>$config['region' ], 'filetype'=>$filetype] );
33. } catch( Excp $e ){
34. $extra = $e->getExtra();
35. echo (new Excp("COS API 錯誤", 502, ['resp'=>$resp, 'e'=>$extra]))->toJSON();
36. return;
37. }
38. if ( $resp['code'] == 0) {
39. Utils::out($resp['data']);
40. return;
41. }
42. echo (new Excp("COS API 錯誤", 502, ['resp'=>$resp]))->toJSON();
43. return;
44.
45. }
46. }
第三步: 提交程式碼更新
1. git add *
2. git commit -m '+COS Upload {{pull}}' # {{pull}} feed 指令更新線上程式碼
3. git push
第四步: 登入雲主機,執行測試
1. docker exec -it xpmjs-server /bin/bash # 進入容器
2. cd ~
3. wget http://wxapp-1252011659.file.myqcloud.com/4883017283.jpg
4. tdm app run /apps/xqcloud/controller/Cos.php upload --f='''{"wxfile":"4883017283.jpg"}''' --vv
四、實驗結果
通過呼叫 COS 介面,掌握 RESTFul API 呼叫和除錯的方法;通過封裝圖片上傳介面,掌握
RESTFul API 的封裝方法。
相關推薦
如何用Baas快速在騰訊雲上開發小程式-系列3 :實現騰訊雲COS API呼叫
一、實驗簡介 本實驗通過呼叫騰訊雲物件儲存(COS)介面,實現將圖片上傳到指定的 Bucket 功能;同時封裝圖片上傳介面,用於上傳商品圖片。 二、實驗目標 掌握 RESTFul API 介面呼叫和除錯方法掌握 RESTFul API 封裝方法 三、實驗步驟
基於 SailingEase WinForm Framework 開發優秀的客戶端應用程式(3:實現選單/工具欄按鈕的解耦及狀態控制)
private void InitializeNavigation() { _navigationService.Register("MainMenu://Session[Text='會話']/Session/"); _navi
微信小程式實戰教程:模仿—網易雲音樂(一)
初窺 todo: 新增音樂到收藏(最近)列表 歌詞滾動 從一個hello world開始 微信開發者工具生成 目錄如下: . |-- app.js |-- app.json |-- app.wxss |-- pages |
微信小程式詳細圖文教程-10分鐘完成微信小程式開發部署釋出(3元獲取騰訊雲伺服器帶小程式支援系統)
1、【高頻使用】 美團外賣 滴滴公交查詢 車來了 大眾點評+ 京東購物 摩拜單車 滴滴出行DiDi 攜程酒店機票火車票 2、【旅行】 驢媽媽門票預訂 飛常準查航班 海南航空微應用 南航e行 去哪兒出行 朋友家精選
用雲開發快速製作客戶業務需求收集小程式丨實戰
一、導語 如何省去企業上門(現場)蒐集客戶需求的環節,節約企業人力和時間成本,將客戶的業務定製需求直接上傳至雲資料庫?雲開發為我們提供了這個便利! 二、需求背景 作為一名XX公司IT萌萌新,這段時間對小程式開發一直有非常濃厚的興趣,並且感慨於“雲開發·不止於快”的境界。近期工作中,剛好碰見業務部門的一
大風起兮雲飛揚! 小程式雲開發實戰奉上
寫在前面: 小程式雲開發釋出有一段時間了,最近著手做了一個基於雲開發的小程式專案--仿《微博鮮知》,來自新浪的這款全新風格的小程式雖然介面非常簡約清新,但是內部還是內藏了很多玄機,在實現的路上遇上了不少坎坷,在這裡分享給大家。希望給大家提供一些思路。 先展示一下最終結果:更多圖片資源在這裡
2017的小目標,從《雲上開發與運維最佳實踐》開始 – 運維派
技術改變世界,我們用實戰說話 本次OpenTalk線下技術沙龍將是一場 您絕不能錯過的技術盛宴! 網際網路邁入雲端時代,隨著使用者體量增加和業務擴張,系統管理難度指數上升。在此背景下進行高效的架構設計和有效的運維管理保障系統穩定性具有重大現實意義。 無論是已經擁有海量使用者的巨頭公司,或是需要
公司內網用一臺主機做代理上外網的情況下,webstorm連線碼雲gitosc
專案要用到前端,用eclipse都說不好使,然後試了下用webstorm,結果沒辦法連線上碼雲,為何用碼雲? 因為可以儲存私有專案, 然後發現連線不上,github也不行 靈機一動,試試把ws的代理也配一下,然後就搞定了 去看了一下eclipse,發現他是自動就配置好
雲上樹莓派(1):環境準備
roc add latest test limit class rdp windows 兩個 1. 設備準備 準備好的設備包括: 樹莓派3B,來自某寶 電源,來自某寶 8G 10級 microSD 卡(TF卡),包括讀卡器,來自某東 散熱片兩個,來自某寶
雲開發小程式首次使用心得
微信在9月10日釋出了新的功能——雲開發,包含三大板塊:雲函式、雲端儲存、雲資料庫。詳細介紹請看官方文件。 有了雲開發,不用自己租伺服器,不用自己寫後端複雜邏輯,不用設計API。。。就很方便。 下面來說說遇到的一些坑。 資料庫的使用 資料庫是json格式的,可以在雲函式或者小程式中對
雲開發小程式端搜尋不到的原因
本以為是小程式端會自動填入openid,導致搜尋時自動按照openid去查 實際上是因為搜尋的格式是字串型別,而資料庫中是數字型別才沒查到 還有就是檢視雲端資料庫許可權是否設定正確。 小程式端查詢不必要用雲函式。 資料庫的記錄中是否擁有appid,與小程式端能否查到無關,與許可權設定
小程式專案沒有快速建立 (Quick start) 微信小程式開發工具
有時候專案直接從GIT 拉取 ,會存在.git 隱藏檔案或者因為編輯器 會存在一些隱藏資料夾,導致我們直接在新建的時候直接選擇當前資料夾時微信小程式開發工具不會顯示快速搭建專案解決方案 只需要講檔案的隱藏檔案清空,保證資料夾完全空的
如何在阿里雲上部署django網站(3)——runserver試執行
python提供了最基本最簡單的部署方案:runserver。不過我們真正部署的時候,都不會用到它,這是因為runserver本身有很大的缺陷。不過,作為測試,使用runserver對於新手來說是一件簡單且具有里程碑意義的事件。 假設我們已經將mysite通過git克隆到阿里雲ecs上
用vue來開發小程式專案詳解,極大方便了開發者
案例圖: 五分鐘教程: 通過 Vue.js 命令列工具 vue-cli,你只需在終端視窗輸入幾條簡單命令,即可快速建立和啟動一個帶熱過載、儲存時靜態檢查、內建程式碼構建功能的小程式專案: # 全域性安裝 vue-cli $ npm install
小程式從入門到快速開發小程式專案
作者:譚東 備註:小程式只是突發靈感興趣弄的,並非專業研究小程式,其實小程式API並不多,不復雜,擴充套件無非就是JS了。 然後有目標的進行實踐,也就是要實現個你想要的小程式,這樣邊實踐邊學習才能夠有疑問,才能夠更快的理解和學習小程式開發。所以後續幾天就開始小程式
在滴滴雲上學習 Kubernetes v1.13.0:叢集搭建
前言 Kubernetes 1.13 在 2018 年 12 初 GA,這是今年的第四次也是最後一次大版本。此版本繼續關注 Kubernetes 的穩定性和可擴充套件性,其中在儲存和群集生命週期領域的三個主要功能實現普遍可用(GA);Kubeadm 簡化叢集管理、容器儲存介面(CSI)和
可以用vue開發小程式了!美團開源前端框架 mpvue
Vue 大法好, Vue 作為前端開發語言,真的是覆蓋全面,前端,移動端,桌面端,端端滲透。而且
美團開源用 Vue.js 開發小程式的前端框架 mpvue
https://mp.weixin.qq.com/s/trz-nTuEv1jibj38BVeyvg開源最前線(ID:OpenSourceTop) 猿妹 編譯素材來源:http://mpvue.com美團開源的mpvue引起了不少前端er們的注意。我們來介紹一款由美團點評研發,
清雲小程式教你:如何區分定製型、模板型、SAAS三種不同開發模式?
問:怎麼區分小程式定製開發、模板、SAAS三種不同開發模式? 答:這是三種不同的開發模式,各有優點,和各有缺點,成本也大不相同,沒有絕對優劣,關鍵是看那種模式適合而已。 定製開發: 定義:顧名思義,就是完全按照你的需求給你定製。特點是可以給到原始碼,獨立部署
教程首發:用區塊鏈開發小程式!(程式設計師入門區塊鏈系列)
2018年,區塊鏈技術可謂是最熱的寵兒。在國務院釋出的檔案中,區塊鏈技術被定義為戰略性前沿技術超