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

一、快速入门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.jpgvar 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_suffixreturn fileName;
}function nowTimeFormat(){//将当前时间转换成yyyymmdd格式var mydate = new Date();var str = "" + mydate.getFullYear();var mm = mydate.getMonth()+1if(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、返回的路径赋值给表单，然后表单提交到后台。

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

基于hadoop构建对象存储系统_Hadoop社区正式支持腾讯云对象存储COS
8月4日消息,知名大数据开源社区Hadoop近日宣布对腾讯云对象存储COS的正式支持.后续,开发者在基于Hadoop架构进行大数据分析时,能够在不修改代码的情况下,无缝高效地使用腾讯云COS来处理海量 ...
electron 使用json作为本地存储_使用腾讯云对象存储 COS 作为 Velero 后端存储，实现集群资源备份和还原...
Velero(以前称为 Heptio Ark)是一个开源工具,可以安全地备份和还原,执行灾难恢复以及迁移 Kubernetes 集群资源和持久卷,可以在 TKE 集群或自建 Kubenetes 集群中 ...
腾讯云对象存储cos使用
腾讯云对象存储cos使用一.新建密钥 1.登录腾讯云进入控制台 2.新建密钥二.创建对象存储 1.进入对象存储,并创建存储桶三.创建项目 pom文件 yml文件创建一util层 control ...
认证+1！腾讯云对象存储COS、存储一体机TStor首批通过信通院云原生存储能力评估
数字经济发展日新月异,企业走向数字化,诞生了海量的软件和服务.软件行业高数据规模,高自动化.高迭代速度的要求,给传统软件行业带来了挑战.为推动软件架构更加健全,管理更加高效,云原生的概念应运而生,强调 ...
腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案
沈唁 PHP工程师,开源爱好者,WordPress插件Sync QCloud COS 作者,GitHub@sy-records 在日常开发当中,我们必然会遇到一些图片存储问题,例如用户头像.聊天产生的 ...
腾讯云对象存储 COS 服务之 XML Python SDK 实践
文章目录前言 1 SDK 安装 2 测试代码准备 - 文件上传和下载 2.1 初始化 2.2 文件上传 2.3 文件下载 3 测试验证 END 前言腾讯云对象存储(Cloud Object Sto ...
腾讯云cos html,Docsify+腾讯云对象存储 COS，一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
腾讯云对象存储 COS 荣获对象存储领导力奖！！！
本文转自"亚太CDN产业联盟"公众号亚太内容分发大会暨 CDN 峰会一直致力于推动 CDN 产业深度融合发展和市场普及,现已成为亚太地区影响力最大的内容分发网络盛会.十年来,在以 ...
如何开通并快速入门腾讯云对象存储COS服务？
简介对象存储(Cloud Object Storage,COS)控制台是 COS 为用户提供的最简单且易于上手的操作方式.用户无需编写代码或运行程序,可直接通过 COS 控制台使用 COS 服务. ...
轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）
概述对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据. 个人账户首次开通COS可以免费领取50GB 标准存 ...

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

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

最新文章

热门文章