前端根據七牛token上傳資源到七牛雲

時間 2019-11-17

標籤前端根據七牛 7牛 token 上傳資源简体版

原文原文鏈接

需求:html

項目中涉及到上傳圖片或者視頻到七牛雲,若是提交二進制數據給後臺上傳,通過試驗體驗不是很好,文件小還好,文件一大整個過程就會很慢,因此須要前端直接上傳到七牛,而後把七牛的資源key提交給後端就能夠,後端只須要提供七牛的上傳token便可.前端

第一步:獲取七牛tokenjquery

這個步驟直接找後端人員要接口,他會返回一個很長的七牛上傳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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。