腾讯云 cos ajax,腾讯云 COS JS SDK(JSON API)
cos-js-sdk-v4
已弃用 - 请升级到 cos-js-sdk-v5
SDK 依赖的 JSON API 已弃用,请直接使用基于 XML API 的 cos-js-sdk-v5。
腾讯云 COS JS SDK(JSON API)
前期准备
使用SDK需要浏览器支持HTML 5
请您到https://console.cloud.tencent.com/cos 获取您的项目ID(appid),bucket,secret_id和secret_key。
请您到https://console.cloud.tencent.com/cos 针对您要操作的bucket进行跨域(CORS)设置,可以按照如下范例,修改来源 Origin:
配置
Step1. 下载源码
从github下载源码,将SDK中dist目录下的cos-js-sdk-v4.js包含到您的项目中。
Step.2 加载文件
在您的页面里引入cos-js-sdk-v4.js
使用
cos-js-sdk之v4与v3相比的一些改动
v3没有地域信息,v4初始化的逻辑,必须指定地域信息,华南地区填gz 华东填sh 华北填tj
v3的auth.php耦合度太高,sha1值使用了flash计算,v4把鉴权的逻辑分离,可以自己实现getAppSign和getAppSignOnce, v4提供了完整的,浏览器端实现签名的示例,注意传给 SDK 的签名要做一次 url 编码
v3分了普通上传和分片上传接口,v4上传直接调用一个接口即可,大文件会自动调用分片逻辑(当然也可以手动调用分片上传)
v4新增了进度回调onprogress
v4进行了模块化封装,可以自行用gulp构建
如何确定自己应该是用v4的sdk还是v3的? 登陆https://console.cloud.tencent.com/cos 如果左上角提示是云对象存储v4则说明要用v4的sdk否则就是v3的
可以通过 npm 引入打包依赖
npm i cos-js-sdk-v4 --save-dev
所有的示例代码实现可以参考sample/index.html
初始化
//初始化逻辑
//特别注意: JS-SDK使用之前请先到 console.cloud.tencent.com/cos 对相应的Bucket进行跨域设置
var cos = new CosCloud({
appid: appid,// APPID 必填参数
bucket: bucket,//bucketName 必填参数
region: 'sh',//地域信息 必填参数 华南地区填gz 华东填sh 华北填tj
getAppSign: function (callback) {//获取签名 必填参数
//下面简单讲一下获取签名的几种办法
//1.搭建一个鉴权服务器,自己构造请求参数获取签名,推荐实际线上业务使用,优点是安全性好,不会暴露自己的私钥
//拿到签名之后记得调用callback
/**
$.ajax('SIGN_URL').done(function (data) {
var sig = data.sign;
callback(sig);
});
**/
//2.直接在浏览器前端计算签名,需要获取自己的accessKey和secretKey, 一般在调试阶段使用
//拿到签名之后记得调用callback
//var res = getAuth(); //这个函数自己根据签名算法实现
//callback(res);
//3.直接复用别人算好的签名字符串, 一般在调试阶段使用
//拿到签名之后记得调用callback
//callback('YOUR_SIGN_STR')
//
},
getAppSignOnce: function (callback) {//单次签名,必填参数,参考上面的注释即可
//填上获取单次签名的逻辑
// callback('YOUR_SIGN_STR')
}
});
上传程序示例
var myFolder = '/111/';//需要操作的目录
var successCallBack = function (result) {
$("#result").val(JSON.stringify(result));
};
var errorCallBack = function (result) {
result = result || {};
$("#result").val(result.responseText || 'error');
};
var progressCallBack = function(curr){
$("#result").val('uploading... curr progress is '+curr);
};
$('#js-file').off('change').on('change', function (e) {
var file = e.target.files[0];
cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder+file.name, file, 0);
return false;
});
分片上传大文件程序示例
var myFolder = '/111/';//需要操作的目录
var successCallBack = function (result) {
$("#result").val(JSON.stringify(result));
};
var errorCallBack = function (result) {
result = result || {};
$("#result").val(result.responseText || 'error');
};
var progressCallBack = function(curr){
//注意一下这里的进度,这里返回的是总的进度,而不是单个ajax的进度
//例如文件是100M,ajax每次分片上传1M的数据,目前传了500K,则进度应该是
// 500K/100M == 0.05
$("#result").val('uploading... curr progress is '+curr);
};
$('#js-file').off('change').on('change', function (e) {
var file = e.target.files[0];
//分片上传也直接调用uploadFile方法,内部会判断是否需要分片
cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder+file.name, file, 0);
return false;
});
创建文件夹示例
$('#createFolder').on('click', function () {
var newFolder = '/333/';//填你需要创建的文件夹,记得用斜杠包一下
cos.createFolder(successCallBack, errorCallBack, bucket, newFolder);
});
删除文件夹示例
//删除文件夹
$('#deleteFolder').on('click', function () {
var newFolder = '/333/';//填你需要删除的文件夹,记得用斜杠包一下
cos.deleteFolder(successCallBack, errorCallBack, bucket, newFolder);
});
获取文件夹内列表示例
//获取指定文件夹内的列表,默认每次返回20条
$('#getFolderList').on('click', function () {
cos.getFolderList(successCallBack, errorCallBack, bucket, myFolder);
});
获取文件夹属性示例
//获取文件夹属性
$('#getFolderStat').on('click', function () {
cos.getFolderStat(successCallBack, errorCallBack, bucket, '/333/');
});
更新文件夹属性示例
//更新文件夹属性
$('#updateFolder').on('click', function () {
cos.updateFolder(successCallBack, errorCallBack, bucket, '/333/', 'new attr');
});
删除文件示例
//删除文件
$('#deleteFile').on('click', function () {
var myFile = myFolder+'2.txt';//填你自己实际存在的文件
cos.deleteFile(successCallBack, errorCallBack, bucket, myFile);
});
获取文件属性示例
//获取文件属性
$('#getFileStat').on('click', function () {
var myFile = myFolder+'2.txt';//填你自己实际存在的文件
cos.getFileStat(successCallBack, errorCallBack, bucket, myFile);
});
更新文件属性示例
//更新文件属性
$('#updateFile').on('click', function () {
var myFile = myFolder+'2.txt';//填你自己实际存在的文件
cos.updateFile(successCallBack, errorCallBack, bucket, myFile, 'my new file attr');
});
拷贝文件示例
//拷贝文件,从源文件地址复制一份到新地址
$('#copyFile').on('click', function () {
var myFile = '111/2.txt';//填你自己实际存在的文件
//注意一下目标的路径,这里如果填333/2.txt 则表示文件复制到111/333/2.txt
//如果填/333/2.txt 则表示文件复制到bucket根目录下的333/2.txt
var newFile = '/333/2.txt';
var overWrite = 1;//0 表示不覆盖 1表示覆盖
cos.copyFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);
});
移动文件示例
//移动文件,把源文件移动到新地址,如果是同一个目录移动且文件名不同的话,相当于改了一个文件名
//如果是移动到新目录,相当于剪切当前的文件,粘贴到了新目录
$('#moveFile').on('click', function () {
var myFile = '/111/2.txt';//填你自己实际存在的文件
//注意一下目标的路径,这里如果填333/2.txt 则表示文件移动到111/333/2.txt
//如果填/333/2.txt 则表示文件移动到bucket根目录下的333/2.txt
//如果填/111/3.txt 则相当于把2.txt改名成3.txt
var newFile = '/333/2.txt';
var overWrite = 1;//0 表示不覆盖 1表示覆盖
cos.moveFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);
});
反馈
欢迎提issue
腾讯云 cos ajax,腾讯云 COS JS SDK(JSON API)相关推荐
- 百度云加速 ajax,使用百度云加速后网站打开速度慢、广告不显示的解决方法
最近发现自己的博客打开很慢,通过ie浏览器打开速度还可以,使用任何第三方浏览器打开都超级慢,以为是HTML代码元素导致,一番比对后没有发现不是HTML5代码问题,但是在头部发现一串javascript ...
- 使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景 名词 参考 效果图展示 开发步骤 1:概要步骤 2:上代码 结束: 使用微信js sd ...
- 腾讯云cos html,腾讯云对象存储(COS)插件安装设置图文教程
腾讯云对象存储(COS)插件是腾讯云官方开发的针对在 wordpress中使用腾讯云对象存储cos的用户开发的辅助插件.通过在 wordpress程序中安装插件的方式,很方便的把WordPress静态 ...
- web直传cos(腾讯云)图片视频
1. 腾讯云控制台:登录 - 腾讯云 2. 腾讯云对象存储jssdk文档(含cos-js-sdk-v5.min.js文件 + 跨域设置访问配置):对象存储 快速入门-SDK 文档-文档中心-腾讯云33 ...
- 腾讯云cos html,腾讯云COS对象存储基础设置全攻略记录
腾讯云专题网在"创建腾讯云COS存储准备部署静态资源分离 及获取API授权"文章中分享到我们如何创建腾讯云COS对象存储以及获取API密钥的方法.但是,如果我们将腾讯云COS存储用 ...
- 刚刚马化腾发布腾讯超级大脑,腾讯云AI服务全面免费接入!
[导读]今天,马化腾第三次参加云+未来峰会,提出人联网.物联网.智联网的"三张网"的概念.腾讯"超级大脑"也正式亮相.马化腾还透露,微信团队在研发一套车载全语音 ...
- 云直播SDK核心功能对比|腾讯云、阿里云、声网、即构等SDK厂商对比
直播业务概述 大家所熟知的直播平台虎牙.斗鱼.快手.抖音.B站,直播功能看似普遍,但从零到一开发却不简单.直播中运用到的技术难点非常之多,音频视频处理/编解码,前后处理,直播分发,即时通讯等技术,学好 ...
- python调用qq识别图片文字_Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解...
百度OCR体验地址: 腾讯OCR体验地址: 测试结果是:腾讯的效果要比百度的好 腾讯云目前额度是: 每个接口 1,000次/月免费,有6个文字识别的接口,一共是6,000次/月 百度接口调用之前写过文 ...
- 腾讯云团队为什么用阿里云的服务名?
腾讯云开发者发表了一篇最新客户成功案例 <由浅入深纵观腾讯文档的云原生实践之路>,实话实说,写的挺好的,远远超出了我在<腾讯云阿里云做的真的是云计算吗?--从客户成功案例的视角> ...
最新文章
- hibernate、struts、spring mvc的作用
- 你不知道的APP色彩跟产品场景的关联因素(干货多图)
- Linux Centos6.5如何截图
- SQL Tree解法
- TVM:使用Tensor Expression (TE)来处理算子
- 带你了解数仓安全测试的TLS协议
- 用VB如读取内存地址
- for循环中的参数能不省略
- 微信JS SDK Demo 官方案例
- spring Quartz基于配置文件和注解的实现
- java根据身份证号码计算年龄的方法(精确到日)
- 使用curl完成POST数据给飞信接口
- java数青蛙_LeetCode 1419. 数青蛙
- Eigen求特征值与特征向量
- 【Oracle】TYPE定义的数据类型
- Oracle EBS中分类账和法人实体 的关系(有sql语句实例)
- Java是剑客,.NET是刀客
- python-藏头诗与成语接龙(爬虫)
- vue遇到ie兼容问题如何处理_vue IE兼容性问题汇总
- Mac OS--终端