騰訊雲COS使用前端js的sdk上傳視頻,預覽,下載

騰訊雲對象存儲

其實官方文檔說得很明白了

官方文檔參考鏈接 https://cloud.tencent.com/document/product/436/11459

申請訪問密鑰

https://console.cloud.tencent.com/cam/capi

登錄 對象存儲控制台 ，創建存儲桶。獲取存儲桶名稱和 地域名稱。
登錄 訪問管理控制台 ，獲取您的項目 SecretId 和 SecretKey。
配置 CORS 規則，AllowHeader 需配成*

跨域配置

script 引入

<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

獲取臨時密鑰

由於固定密鑰放在前端會有安全風險，正式部署時我們推薦使用臨時密鑰的方式，實現過程為：前端首先請求服務端，服務端使用固定密鑰調用 STS 服務申請臨時密鑰（具體內容請參見 臨時密鑰生成和使用指引 文檔），然后返回臨時密鑰到前端使用。

初始化

var Bucket = '';    /* 存儲桶名稱 */
var Region = '';     /* 存儲桶所在地域，必須字段 */
// 初始化實例
var cos = new COS({
    //必選參數
    getAuthorization: function (options, callback) {
        // 服務端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // 服務端其他語言參考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
        // STS 詳細文檔指引看：https://cloud.tencent.com/document/product/436/14048
        $.get('getSts', {
                // 可從 options 取需要的參數
                bucket: options.Bucket,
                region: options.Region,
            },
            function (data,result) {
                var dataObj=eval("("+data+")");
                var credentials = dataObj && dataObj.credentials;
                if (!dataObj || !credentials) return console.error('credentials invalid');
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    SecurityToken: credentials.sessionToken,
                    // 建議返回服務器時間作為簽名的開始時間，避免用戶瀏覽器本地時間偏差過大導致簽名錯誤
                    StartTime: dataObj.startTime, // 時間戳，單位秒，如：1580000000
                    ExpiredTime: dataObj.expiredTime, // 時間戳，單位秒，如：1580000900
                    ScopeLimit: true, // 細粒度控制權限需要設為 true，會限制密鑰只在相同請求時重復使用
                });
            });
    },
});

臨時密鑰生成及使用指引

官方文檔
其他權限文檔查看

	@RequestMapping(value = "/getSts",method = RequestMethod.GET)
	@ResponseBody
	public String getSts(@RequestParam(value = "bucket")String bucket,@RequestParam(value = "region")String region) {
		System.out.println("request============>"+bucket);
		TreeMap<String, Object> config = new TreeMap<String, Object>();
		Response credential = null; // 憑證結果
		try {

			// 雲 api 密鑰 SecretId
			config.put("secretId", accessKeyId);
			// 雲 api 密鑰 SecretKey
			config.put("secretKey", accessKeySecret);

			// 設置域名
			//config.put("host", "sts.internal.tencentcloudapi.com");

			// 臨時密鑰有效時長，單位是秒
			config.put("durationSeconds", 1800);
			// 換成你的 bucket
			config.put("bucket",bucket);
			// 換成 bucket 所在地區
			config.put("region", region);

			// 可以通過 allowPrefixes 指定前綴數組, 例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全風險, 請謹慎評估使用)
			config.put("allowPrefixes", new String[] {
					"*"
			});

			// 密鑰的權限列表。簡單上傳和分片需要以下的權限，其他權限列表請看 https://cloud.tencent.com/document/product/436/31923
			String[] allowActions = new String[] {
					// 簡單上傳
					"name/cos:PutObject",
					"name/cos:PostObject",
					"name/cos:GetObject",
					// 分片上傳
					"name/cos:InitiateMultipartUpload",
					"name/cos:ListMultipartUploads",
					"name/cos:ListParts",
					"name/cos:UploadPart",
					"name/cos:CompleteMultipartUpload",

			};
			config.put("allowActions", allowActions);
			// 添加一批資源路徑
			// 一條資源的規則是：qcs::cos:<REGION>:uid/<APPID>:<BUCKET-APPID>/<OBJECT>
			String[] allowResource= new String[] {
					"qcs::cos:ap-beijing:uid/appid:/"
			};
			config.put("allowResource",allowResource);

			credential  = CosStsClient.getCredential(config);
			System.out.println(Jackson.toJsonPrettyString(credential));

			return Jackson.toJsonPrettyString(credential);
		} catch (Exception e) {
			e.printStackTrace();
			throw new IllegalArgumentException("no valid secret !");
		}
	}

js上傳的代碼

      cos.sliceUploadFile({
            Bucket: Bucket, // 桶名-APPID  必須
            Region: Region, //區域 必須
            Key: "路徑可填可不"+file.name, //文件名必須
            StorageClass: 'STANDARD',
            Body: file, // 上傳文件對象
            SliceSize: 1024 * 1024 * 5,     /* 觸發分塊上傳的閾值，超過5MB使用分塊上傳，非必須 */
            onTaskReady: function (taskId){
                /*執行隊列taskId*/
                log('taskId '+taskId)
            },
            onHashProgress: function (progressData) {
                log('校驗中', JSON.stringify(progressData));
            },
            onProgress: function (progressData) {
                var percent = parseInt(progressData.percent * 10000)/100;
                var speed = parseInt((progressData.speed / 10242 /1024)*100)/100;
                console.log('進度: '+ percent + '%; 速度: ' + speed + 'Mb/s');
                console.log('進度: '+parseInt(percent) + '%');

                console.log('上傳中', JSON.stringify(progressData));
                $(progress).css("width",(progressData.percent*100) + "%");


            },
        }, function (err, data) {
            if (err) {
                callback({success: false, msg: '文件上傳失敗!'});
                return;
            }
            if (data.statusCode == 200){
                //成功后的處理storeAs文件路徑
                storeAs = getFilePath(fileInfo);
                saveFile(file,data);
            }

        });

預覽

                        cos.getObjectUrl({
				Bucket: bucket,
				Region: 'ap-beijing',/* 存儲桶所在地域，必須字段 */
				Key: objname,//文件名
				Protocol:"https:",
				Sign: true//因為是開啟私讀,這里需要吧簽名開啟
			}, function (err, data) {
				if (err) return console.log(err);
				window.open(data.Url);
			});

下載

    	download:function(bucket,objname){
			cos.getObjectUrl({
				Bucket: bucket,
				Region: 'ap-beijing',/* 存儲桶所在地域，必須字段 */
				Key: objname,
				Protocol:"https:",
				Sign: true,
				Expires: 3600, // 單位秒
			}, function (err, data) {
				var downloadUrl = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=attachment'; // 補充強制下載的參數
				window.open(downloadUrl);
			});
		}