腾讯云对象存储(cos) js jdk上传文件

                                                                      腾讯云对象存储(cos) js jdk上传文件

1、快速入门API地址： https://cloud.tencent.com/document/product/436/11459

2、主要思路
    把COS JS JDK上传返回的路径赋值给表单，而后表单提交到后台。

3、主要步骤
    一、下载JS SDK放到项目的目录下
    二、修改 .../cos-js-sdk-v5-master/server/sts.php
        $config 参数的 secretId, secretKey, bucket, region 为本身的
    三、把test.html 文件示例代码
        的 Bucket, Region 也改成本身的，从后台经过模板引擎传。

<form id="add_video_form" method="post" class="form">
	<input id="file-selector" type="file">
	<input type="hidden" id="video_url" name="video_url"></input>
	<video src="" id="video_id" style="display:none;width:300px" controls="controls"></video>
</form>
<button id="save">上传</button>			
				
<script src="dist/cos-js-sdk-v5.min.js"></script>
<script>
var Bucket = 'examplebucket-1250000000';
var Region = 'ap-guangzhou';

// 初始化实例
var cos = new COS({
    getAuthorization: function (options, callback) {
        // 异步获取临时密钥
        $.get('../server/sts.php', {
            bucket: options.Bucket,
            region: options.Region,
        }, function (data) {
            callback({
                 TmpSecretId: data.credentials.tmpSecretId, 
                 TmpSecretKey: data.credentials.tmpSecretKey, 
                 XCosSecurityToken: data.credentials.sessionToken, 
                 ExpiredTime: data.expiredTime
            });
        });
    }
});

// 监听选文件
document.getElementById('file-selector').onchange = function () {

    var file = this.files[0];
    if (!file) return;

	//自定义文件名：video/20190430/1556616588201.jpg
	var fileName = file.name;
	if(fileName.toLowerCase().indexOf('mp4')==-1){
		$.messager.alert('舒适提示','请上传mp4文件！');
		return false;
	}
	fileName = getFileName( fileName );
	//console.log(fileName);

	//MaskUtil.mask();	#自定义的上传中动态效果，防止视频没传完用户就进行其余操做
	
    // 分片上传文件，详细说明请参阅 JavaScript SDK 接口文档
    cos.sliceUploadFile({
        Bucket: Bucket,
        Region: Region,
        Key: fileName,	#这里的Key须要本身用js定义规则
        Body: file,
    }, function (err, data) {
		//MaskUtil.unmask();	#上传成功关闭加载效果
        console.log(err, data);
		//在这里作回调成功的操做，好比我上传视频，成功以后，删除input框，而且显示video框，并给video框的src属性赋值
		if(typeof(data)=='undefined'){
			alert('上传失败！');
			return false;
		}
		if(data.statusCode!=200){
			alert('错误['+ data.statusCode +']');
			return false;
		}
		
		//把路径复制给表单
		var video_url = 'http://' + data.Location;
		$('#file-selector').hide();
		$('#video_url').val(video_url);
		$('#video_id').attr('src', video_url);
		$('#video_id').show();
    });

};
</script>

我用Js给Key定义规则，即文件的路径 = 目录+文件名
//计算文件名	video/20190430/1556616588201.jpg
//规则 video + yyyyMMdd + 时间戳 + (100-999随机数)
function getFileName(file_name){
	var date_dir = nowTimeFormat();
    var date_strto = Date.parse(new Date()) / 1000 ;
    var rand_number = parseInt(Math.random() * (999 - 100 + 1) + 100);
    var file_suffix = file_name .substr(file_name .lastIndexOf("."));  
	var fileName = 'video/'+date_dir+'/'+ date_strto + rand_number + file_suffix
	return fileName;
}

function nowTimeFormat(){//将当前时间转换成yyyymmdd格式
    var mydate = new Date();
    var str = "" + mydate.getFullYear();
    var mm = mydate.getMonth()+1
    if(mydate.getMonth()>9){
     str += mm;
    }
    else{
     str += "0" + mm;
    }
    if(mydate.getDate()>9){
     str += mydate.getDate();
    }
    else{
     str += "0" + mydate.getDate();
    }
	return str;
}

//Ajax上传表单数据到后台
$('#save').click(
	function(){
		//提交表单操做
		var isValid = $('#add_video_form').form('validate');
		if (!isValid)	return false;
			
		//MaskUtil.mask();
		var formData = new FormData($( "#add_video_form" )[0]);

	   $.ajax({
		   url: href,
		   data: formData,
		   dataType: 'json',
		   type: 'post',

		   async: false,  
		   cache: false,  
		   contentType: false,  
		   processData: false,
		   
		   success: function(result) {
			   //###
		   }
		});
	}
);

四、还要设置一下 配置 CORS 规则，操做详情请参阅 设置跨域访问。https://cloud.tencent.com/document/product/436/13318
   效果以下图所示
   
五、上传成功回调的data的格式

Bucket: "hobby"        #桶名
ETag: ""a7f933e0*****************75f1b4-1""
Key: "video/20190517/1558063614623.png"        #Key的值，好比桶名是 hobby，则文件的路径即为 hobby/video/20190517/1558063614623.png
Location: "ad/20190517/1558063614623.png"    #返回的文件路径，须要咱们拼接上http或https
headers: {content-type: "application/xml"}
statusCode: 200
__proto__: Object

六、返回的路径赋值给表单，而后表单提交到后台。