Git Product home page Git Product logo

cos-js-sdk-v4's Introduction

cos-js-sdk-v4

已弃用 - 请升级到 cos-js-sdk-v5

SDK 依赖的 JSON API 已弃用,请直接使用基于 XML API 的 cos-js-sdk-v5

腾讯云 COS JS SDK(JSON API

releases

详细文档

前期准备

  1. 使用SDK需要浏览器支持HTML 5

  2. 请您到https://console.cloud.tencent.com/cos 获取您的项目ID(appid),bucket,secret_id和secret_key。

  3. 请您到https://console.cloud.tencent.com/cos 针对您要操作的bucket进行跨域(CORS)设置,可以按照如下范例,修改来源 Origin:

    ./cors.png

配置

Step1. 下载源码

从github下载源码,将SDK中dist目录下的cos-js-sdk-v4.js包含到您的项目中。

Step.2 加载文件

在您的页面里引入cos-js-sdk-v4.js

<script type="text/javascript" src="cos-js-sdk-v4.js"></script>

使用

cos-js-sdk之v4与v3相比的一些改动

  1. v3没有地域信息,v4初始化的逻辑,必须指定地域信息,华南地区填gz 华东填sh 华北填tj
  2. v3的auth.php耦合度太高,sha1值使用了flash计算,v4把鉴权的逻辑分离,可以自己实现getAppSign和getAppSignOnce, v4提供了完整的,浏览器端实现签名的示例,注意传给 SDK 的签名要做一次 url 编码
  3. v3分了普通上传和分片上传接口,v4上传直接调用一个接口即可,大文件会自动调用分片逻辑(当然也可以手动调用分片上传)
  4. v4新增了进度回调onprogress
  5. v4进行了模块化封装,可以自行用gulp构建
  6. 如何确定自己应该是用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-js-sdk-v4's People

Contributors

carsonxu avatar konakonall avatar tomleader avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cos-js-sdk-v4's Issues

iphone6s 系统版本10.0.2中使用js SDK时SDK抛出错误

最近开发微信公众号,使用html5开发,有文件上传的功能中使用了腾讯云提供的js cos-js-sdk-v4类库,上传图片到腾讯云盘,经过多种机型的测试发现,在iphone6s 版本号为10.0.2的系统中都无法上传图片,上传图片的API cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, folder + fileName, file, 0, taskReady) 调用上传方法后,直接进入错误回调 errorCallBack,弹出的错误回调result.responseText内容为空字符串。在多台iphone6s上都是出现同样的问题,将iphone6s的系统升级到最新后,上传文件正常。请问这是SDK的兼容性问题吗?

iphone5s跟iphone6上传普通文件失败的问题

网页端跟其他设备目前没有问题
iphone5s跟iphone6微信自带浏览器上传普通文件,会执行errorCallBack函数
var errorCallBack = function (result) { alert(JSON.stringify(result)); };

打印效果为:
image

分片上传时,Post 请求响应404

执行至 sliceList() 时,发送 POST 请求:

opt.sign = sign;
var url = that.getCgiUrl(opt.path, opt.sign);

var formData = new FormData();
formData.append('op', 'upload_slice_list');

$.ajax({
    type: 'POST',
    dataType: "JSON",
    url: url,
    data: formData,
    ....

我在调试过程中,url 的值为:

//sh.file.myqcloud.com/files/v2/1252950871/gjstorage2/hugeFile.zip?sign=kRmulURP%2F%2FHwAdSQ44p9IIaJdw9hPTEyNTI5NTA4NzEmaz1BS0lEdmxUNVp3M2I0TlZVSkdqR0Y0a0hkcHFmT3dLWHBqZU4mZT0xNDk4NTU0NzA2JnQ9MTQ5ODU1NDEwNSZyPTE5NjcwNzA2MTYmZj0vMTI1Mjk1MDg3MS9nanN0b3JhZ2UyLyZiPWdqc3RvcmFnZTI%3D

这个时候POST请求返回了404,导致直接执行到 defer.reject();
image

我使用的是 V4 版本, 问题出在哪呢?

CosCloud.prototype.cosapi_cgi_url = "//REGION.file.myqcloud.com/files/v2/";

提示 error失败!

所有参数都设置了,php版本可以,这个版本不行,我用php生成的签名还是不行
不知道什么原因

后端签名时应当带上操作

否则无法限制签名的权限。例如我希望让用户在前台可以上传文件,但是不能列其他用户上传的文件,也不能删除文件。

按照目前的设计应该是无法实现这个限制的,这大大降低了 JS SDK 的安全性。

getAppSign 与 getAppSignOnce 的问题

我看源码中 uploadFile 方法只调用咯getAppSign 我们这里需求是想 一个签名对应一个文件 ,上传完之后签名失效。

  1. 上传文件是否可用单次签名
  2. 默认设置 getAppSign 一直报 APPID_USERID_NOTMATCH
    image

批量上传

除了多次调用之外,没有像阿里云那样的multi-select方式吗

多图片上传问题

能上传多张图片吗?上传多张图片怎么将每张图片的进度分开,好像进度里面都不知道改进度是哪张图片的进度,那张图片成功了

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.