首页 > 其他分享> 文章详细

腾讯云COS使用前端js上传视频,预览,下载

2021-10-19 04:00:27 阅读：175 来源： 互联网

标签：COS 预览 data bucket cos js 密钥 put config

腾讯云对象存储

其实官方文档说得很明白了

官方文档参考链接 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);
			});
		}

标签：COS,预览,data,bucket,cos,js,密钥,put,config
来源： https://www.cnblogs.com/rzkwz/p/15423144.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9