一、快速入门API地址: https://cloud.tencent.com/document/product/436/11459
二、主要思路
把COS JS JDK上传返回的路径赋值给表单,然后表单提交到后台。
三、主要步骤
1、下载JS SDK放到项目的目录下
2、修改 .../cos-js-sdk-v5-master/server/sts.php
$config 参数的 secretId, secretKey, bucket, region 为自己的
3、把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) {
//###
}
});
}
);
4、还要设置一下 配置 CORS 规则,操作详情请参阅 设置跨域访问。https://cloud.tencent.com/document/product/436/13318
效果如下图所示
5、上传成功回调的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
6、返回的路径赋值给表单,然后表单提交到后台。