本文主要是介绍腾讯云COS使用前端js上传视频,预览,下载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

腾讯云对象存储

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

官方文档参考链接 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使用前端js上传视频,预览,下载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！