由於最近的項目有兩台機器一直處於負載均衡狀態,所以上傳的資源都不能直接傳到服務器后台上,而是通過雲平台進行交互,所以不免就涉及到很多上傳,下載的接口,所以專門記錄一下這一系列的過程。
首先要把騰訊雲前端和后端的sdk加入到項目中,JS的sdk地址為https://github.com/tencentyun/cos-js-sdk/tree/master/sdk,PHP的sdk地址為https://github.com/tencentyun/cos-php-sdk(要包括Sign.php因為每次發請求都要傳送簽名進行驗證)同時為了保證上傳文件的唯一性,所以會用到對整個文件內容進行md5處理的js,其位置為https://github.com/forsigner/browser-md5-file/tree/master/dist,並且也簡單的講到其使用方法:
現在簡單的介紹一下其上傳和下載功能(前提是項目都已經成功的引入上述文件,具體其他的功能如創建文件夾,刪除文件夾等功能可以參考騰訊雲存儲的官方文檔https://www.qcloud.com/doc/product/430/5946)。
1.上傳:
首先我在前端頁面創建一個<input type='file'>類型的輸入,
在JS里則是
var bucketName = '你的騰訊雲Bucket名稱'; var cos = new CosCloud('你的騰訊雲app_id');//實例化一個cos對象
var params={}; 表單提交時 { var pic = $('#img_url').prop('files');//獲取上傳的文件信息
browserMD5File(pic[0], function (err, md5) //獲取文件的md5
{ var remotePath = '/image/' + md5 + "." + getSuffix(pic[0]['name']);//要上傳的路徑
cos.out_uploadFile(function(result)//成功回調
{ params['img_url'] = $.parseJSON(result).data.access_url;//騰訊雲的地址賦給這個字段更新到數據庫
}, function (result)//失敗回調
{ alert("上傳失敗!"); }, bucketName, remotePath, pic[0], 0); }); } //獲取文件的后綴名
function getSuffix(filename) { var names = filename.split('.'); return names[names.length - 1]; }
這樣就把騰訊雲回調的路徑傳給了params里的字段傳到后端進行查數據庫處理,為了更好地處理,官方建議把成功的回調和失敗的回調單獨寫成函數處理調用,
這樣相對來說修改方便,推薦一下。
2.下載則一般來說是后端下載,直接訪問到文件的資源就可以下載了,這個用原生的php處理都可以,在php里引入對應的sdk
$cdn_url='你的騰訊雲資源的絕對路徑'; $filename=basename($cdn_url); //獲取文件名
$myFilePath='/app/public/'.$filename; //獲取本地文件路徑
set_time_limit (24 * 60 * 60); $cdnFile = fopen ($cdn_url, "rb"); if ($cdnFile) { $myFile= fopen($myFilePath, "wb"); if ($myFile) { while (!feof($cdnFile)) { fwrite($myFile, fread($cdnFile,1024 * 8),1024 * 8); } } fclose($cdnFile); if($myFile) { fclose($myFile); } }
這樣就在后端把騰訊雲的文件下載下來了,主要是借助於php的fopen函數。
3.獲取上傳進度:
在網頁定義一個進度條,引用自bootstrap的樣式
這個只要設置一個定時器定時修改progress-bar的width即可顯示加載的進度。前端JS獲取上傳進度的接口如下,在調試時一直報錯(后來發現是因為瀏覽器跨域了,所以就把Bucket進行跨域設置就把接口調通了,不過直接用后端發請求是不會出現這個問題的),於是
就用php端直接發同樣的請求:
$bucketName=‘你的Bucket名稱’; $remotePath=‘騰訊雲資源的路徑’; $result=Cosapi::stat($bucketName, $remotePath);//發請求返回結果return response()->json(['filelen'=>$result['data']['filelen']]);
前端在定時把后端傳過去的(這個值/文件長度)*100+“%”設置為進度條的寬度即可。(吐槽一句,從后端發請求簡直容易太多,但是這個接口的回調有問題,進度條的進度從0%突然變到100%,問了騰訊雲說是接口就是這樣,難道接口里再獲取一個進度很難嗎???)
總的來說,其SDK的方法也很常見,基本都是增刪改查(文件、目錄)的功能,只要根據自己的需求調用對應的sdk方法即可,前提是js和php端都得先引入sdk文件才行。