前端根據七牛token上傳資源到七牛雲
阿新 • • 發佈：2019-09-06
需求:
專案中涉及到上傳圖片或者視訊到七牛雲,如果提交二進位制資料給後臺上傳,經過試驗體驗不是很好,檔案小還好,檔案一大整個過程就會很慢,所以需要前端直接上傳到七牛,然後把七牛的資源key提交給後端就可以,後端只需要提供七牛的上傳token即可.
第一步:獲取七牛token
這個步驟直接找後端人員要介面,他會返回一個很長的七牛上傳token
第二步:前端程式碼實現
-
引入qiniu.min.js,我這裡直接使用七牛的cdn引入
<script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script> - 前端完整上傳程式碼如下
<<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" name="image" id="file"> <input type="button" id="upload" value="upload"> </body> <script src="js/jquery.min.js"></script> <script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script> <script> // 七牛token var qiniuToken = 'RmRBqO9olxxPJ3dNKaq-9YxOqS46vZj-AMTGc-o2:ENiL_XazSwOFYClV20BjTmr_M5E=:eyJzY29wZ7I6InlvdWfYW9pdCIsImRlYWRsaW5lIjoxNTY3NzczMDMxfQ==' $("#upload").click(function(){ var obj = $("#file"); // 獲取檔案在本地的絕對路徑 C:\fakepath\cover.jpg var fileName = obj.val(); // 獲取檔案字尾名 .jpg var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length) // 獲取檔案物件 var file = obj.get(0).files[0] // 獲取檔案大小 單位KB var size = (file.size / 1024).toFixed(2) // 設定上傳的七牛key 上傳成功需要把這個值提交到後臺 var qiniuKey = "user/image/20190906/" + suffix // 上傳檔案到七牛 var observer = { //上傳過程的監聽函式 result引數帶有total欄位的 object，包含loaded、total、percent三個屬性) next(result){ // 實現上傳進度條 ... console.log(result) }, //上傳失敗回撥 error(err){ console.log(err.message) }, // 上傳完成回撥 complete(res){ // 提交資料給後端同事等業務邏輯 .... console.log(res) } }; var putExtra = { //原檔名 fname: "", //用來放置自定義變數 params: {}, //限制上傳檔案型別 mimeType: null }; var config = { //儲存區域(z0:代表華東;z2:代表華南,不寫預設自動識別) region:qiniu.region.z2, //分片上傳的併發請求量 concurrentRequestLimit:2 }; var observable = qiniu.upload(file,qiniuKey,qiniuToken,putExtra,config); // 上傳開始 var subscription = observable.subscribe(observer); // 取消上傳 // subscription.unsubscribe(); }) </script> </html>