{"id":19585634,"url":"https://github.com/tencentyun/cos-js-sdk-v4","last_synced_at":"2025-04-27T11:34:09.927Z","repository":{"id":57209616,"uuid":"74635898","full_name":"tencentyun/cos-js-sdk-v4","owner":"tencentyun","description":"腾讯云 COS JS SDK（JSON API）","archived":false,"fork":false,"pushed_at":"2021-02-04T09:39:43.000Z","size":441,"stargazers_count":50,"open_issues_count":3,"forks_count":34,"subscribers_count":57,"default_branch":"master","last_synced_at":"2024-10-11T17:17:00.878Z","etag":null,"topics":["cos","cos-sdk","qcloud","qcloud-sdk","sdk"],"latest_commit_sha":null,"homepage":"https://www.qcloud.com/product/cos","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tencentyun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-24T03:47:07.000Z","updated_at":"2022-07-29T15:49:57.000Z","dependencies_parsed_at":"2022-09-01T08:41:54.214Z","dependency_job_id":null,"html_url":"https://github.com/tencentyun/cos-js-sdk-v4","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tencentyun%2Fcos-js-sdk-v4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tencentyun%2Fcos-js-sdk-v4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tencentyun%2Fcos-js-sdk-v4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tencentyun%2Fcos-js-sdk-v4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tencentyun","download_url":"https://codeload.github.com/tencentyun/cos-js-sdk-v4/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224069536,"owners_count":17250455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cos","cos-sdk","qcloud","qcloud-sdk","sdk"],"created_at":"2024-11-11T07:56:25.081Z","updated_at":"2024-11-11T07:56:26.368Z","avatar_url":"https://github.com/tencentyun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cos-js-sdk-v4\r\n\r\n## 已弃用 - 请升级到 cos-js-sdk-v5\r\nSDK 依赖的 JSON API 已弃用，请直接使用基于 XML API 的 [cos-js-sdk-v5](https://github.com/tencentyun/cos-js-sdk-v5)。\r\n\r\n腾讯云 COS JS SDK（[JSON API](https://cloud.tencent.com/document/product/436/6052)）\r\n\r\n[releases](https://github.com/tencentyun/cos-js-sdk-v4/releases)\r\n\r\n[详细文档](https://cloud.tencent.com/document/product/436/8095)\r\n\r\n## 前期准备\r\n\r\n1. 使用SDK需要浏览器支持HTML 5\u003cbr\u003e\r\n2. 请您到https://console.cloud.tencent.com/cos 获取您的项目ID(appid)，bucket，secret_id和secret_key。\r\n3. 请您到https://console.cloud.tencent.com/cos 针对您要操作的bucket进行跨域（CORS）设置，可以按照如下范例，修改来源 Origin：\r\n\r\n    ![./cors.png](./cors.png)\r\n\r\n\r\n## 配置\r\n\r\n### Step1. 下载源码\r\n从github下载源码，将SDK中dist目录下的cos-js-sdk-v4.js包含到您的项目中。\r\n\r\n### Step.2 加载文件\r\n在您的页面里引入cos-js-sdk-v4.js \u003cbr\u003e\r\n\r\n\u0026lt;script type=\"text/javascript\" src=\"cos-js-sdk-v4.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003cbr\u003e\r\n\r\n## 使用\r\n\r\n### cos-js-sdk之v4与v3相比的一些改动\r\n\r\n1. v3没有地域信息，v4初始化的逻辑，必须指定地域信息，华南地区填gz 华东填sh 华北填tj\r\n2. v3的auth.php耦合度太高，sha1值使用了flash计算，v4把鉴权的逻辑分离，可以自己实现getAppSign和getAppSignOnce， v4提供了完整的，浏览器端实现签名的示例，注意传给 SDK 的签名要做一次 url 编码\r\n3. v3分了普通上传和分片上传接口，v4上传直接调用一个接口即可，大文件会自动调用分片逻辑（当然也可以手动调用分片上传）\r\n4. v4新增了进度回调onprogress\r\n5. v4进行了模块化封装，可以自行用gulp构建\r\n6. 如何确定自己应该是用v4的sdk还是v3的？ 登陆https://console.cloud.tencent.com/cos 如果左上角提示是云对象存储v4则说明要用v4的sdk否则就是v3的\r\n\r\n### 可以通过 npm 引入打包依赖\r\n\r\n```\r\nnpm i cos-js-sdk-v4 --save-dev\r\n```\r\n\r\n### 所有的示例代码实现可以参考sample/index.html\r\n\r\n### 初始化\r\n\r\n```js\r\n//初始化逻辑\r\n//特别注意: JS-SDK使用之前请先到 console.cloud.tencent.com/cos 对相应的Bucket进行跨域设置\r\nvar cos = new CosCloud({\r\n    appid: appid,// APPID 必填参数\r\n    bucket: bucket,//bucketName 必填参数\r\n    region: 'sh',//地域信息 必填参数 华南地区填gz 华东填sh 华北填tj\r\n    getAppSign: function (callback) {//获取签名 必填参数\r\n\r\n        //下面简单讲一下获取签名的几种办法\r\n\r\n        //1.搭建一个鉴权服务器，自己构造请求参数获取签名，推荐实际线上业务使用，优点是安全性好，不会暴露自己的私钥\r\n        //拿到签名之后记得调用callback\r\n        /**\r\n         $.ajax('SIGN_URL').done(function (data) {\r\n            var sig = data.sign;\r\n            callback(sig);\r\n        });\r\n         **/\r\n\r\n        //2.直接在浏览器前端计算签名，需要获取自己的accessKey和secretKey, 一般在调试阶段使用\r\n        //拿到签名之后记得调用callback\r\n        //var res = getAuth(); //这个函数自己根据签名算法实现\r\n        //callback(res);\r\n\r\n\r\n        //3.直接复用别人算好的签名字符串, 一般在调试阶段使用\r\n        //拿到签名之后记得调用callback\r\n        //callback('YOUR_SIGN_STR')\r\n        //\r\n\r\n    },\r\n    getAppSignOnce: function (callback) {//单次签名，必填参数，参考上面的注释即可\r\n        //填上获取单次签名的逻辑\r\n        // callback('YOUR_SIGN_STR')\r\n    }\r\n});\r\n```\r\n\r\n### 上传程序示例\r\n\r\n```js\r\n\r\nvar myFolder = '/111/';//需要操作的目录\r\nvar successCallBack = function (result) {\r\n    $(\"#result\").val(JSON.stringify(result));\r\n};\r\n\r\nvar errorCallBack = function (result) {\r\n    result = result || {};\r\n    $(\"#result\").val(result.responseText || 'error');\r\n};\r\n\r\nvar progressCallBack = function(curr){\r\n    $(\"#result\").val('uploading... curr progress is '+curr);\r\n};\r\n\r\n$('#js-file').off('change').on('change', function (e) {\r\n    var file = e.target.files[0];\r\n    cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder+file.name, file, 0);\r\n    return false;\r\n});\r\n\r\n```\r\n\r\n### 分片上传大文件程序示例\r\n\r\n```js\r\n\r\nvar myFolder = '/111/';//需要操作的目录\r\nvar successCallBack = function (result) {\r\n    $(\"#result\").val(JSON.stringify(result));\r\n};\r\n\r\nvar errorCallBack = function (result) {\r\n    result = result || {};\r\n    $(\"#result\").val(result.responseText || 'error');\r\n};\r\n\r\nvar progressCallBack = function(curr){\r\n    //注意一下这里的进度，这里返回的是总的进度，而不是单个ajax的进度\r\n    //例如文件是100M，ajax每次分片上传1M的数据，目前传了500K，则进度应该是\r\n    // 500K/100M == 0.05\r\n    $(\"#result\").val('uploading... curr progress is '+curr);\r\n};\r\n\r\n$('#js-file').off('change').on('change', function (e) {\r\n    var file = e.target.files[0];\r\n    //分片上传也直接调用uploadFile方法，内部会判断是否需要分片\r\n    cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder+file.name, file, 0);\r\n    return false;\r\n});\r\n\r\n```\r\n\r\n### 创建文件夹示例\r\n\r\n```js\r\n\r\n$('#createFolder').on('click', function () {\r\n    var newFolder = '/333/';//填你需要创建的文件夹，记得用斜杠包一下\r\n    cos.createFolder(successCallBack, errorCallBack, bucket, newFolder);\r\n});\r\n\r\n```\r\n\r\n\r\n### 删除文件夹示例\r\n\r\n```js\r\n\r\n//删除文件夹\r\n$('#deleteFolder').on('click', function () {\r\n    var newFolder = '/333/';//填你需要删除的文件夹，记得用斜杠包一下\r\n    cos.deleteFolder(successCallBack, errorCallBack, bucket, newFolder);\r\n});\r\n\r\n```\r\n\r\n\r\n### 获取文件夹内列表示例\r\n\r\n```js\r\n\r\n//获取指定文件夹内的列表,默认每次返回20条\r\n$('#getFolderList').on('click', function () {\r\n    cos.getFolderList(successCallBack, errorCallBack, bucket, myFolder);\r\n});\r\n\r\n```\r\n\r\n\r\n### 获取文件夹属性示例\r\n\r\n```js\r\n\r\n//获取文件夹属性\r\n$('#getFolderStat').on('click', function () {\r\n    cos.getFolderStat(successCallBack, errorCallBack, bucket, '/333/');\r\n});\r\n\r\n```\r\n\r\n\r\n### 更新文件夹属性示例\r\n\r\n```js\r\n\r\n//更新文件夹属性\r\n$('#updateFolder').on('click', function () {\r\n    cos.updateFolder(successCallBack, errorCallBack, bucket, '/333/', 'new attr');\r\n});\r\n\r\n```\r\n\r\n### 删除文件示例\r\n\r\n```js\r\n\r\n//删除文件\r\n$('#deleteFile').on('click', function () {\r\n    var myFile = myFolder+'2.txt';//填你自己实际存在的文件\r\n    cos.deleteFile(successCallBack, errorCallBack, bucket, myFile);\r\n});\r\n\r\n```\r\n\r\n### 获取文件属性示例\r\n\r\n```js\r\n\r\n//获取文件属性\r\n$('#getFileStat').on('click', function () {\r\n    var myFile = myFolder+'2.txt';//填你自己实际存在的文件\r\n    cos.getFileStat(successCallBack, errorCallBack, bucket, myFile);\r\n});\r\n\r\n```\r\n\r\n### 更新文件属性示例\r\n\r\n```js\r\n\r\n//更新文件属性\r\n$('#updateFile').on('click', function () {\r\n    var myFile = myFolder+'2.txt';//填你自己实际存在的文件\r\n    cos.updateFile(successCallBack, errorCallBack, bucket, myFile, 'my new file attr');\r\n});\r\n\r\n```\r\n\r\n### 拷贝文件示例\r\n\r\n```js\r\n\r\n//拷贝文件，从源文件地址复制一份到新地址\r\n$('#copyFile').on('click', function () {\r\n\r\n    var myFile = '111/2.txt';//填你自己实际存在的文件\r\n\r\n    //注意一下目标的路径，这里如果填333/2.txt 则表示文件复制到111/333/2.txt\r\n    //如果填/333/2.txt 则表示文件复制到bucket根目录下的333/2.txt\r\n    var newFile = '/333/2.txt';\r\n    var overWrite = 1;//0 表示不覆盖 1表示覆盖\r\n    cos.copyFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);\r\n});\r\n\r\n```\r\n\r\n### 移动文件示例\r\n\r\n```js\r\n\r\n//移动文件，把源文件移动到新地址，如果是同一个目录移动且文件名不同的话，相当于改了一个文件名\r\n//如果是移动到新目录，相当于剪切当前的文件，粘贴到了新目录\r\n$('#moveFile').on('click', function () {\r\n\r\n    var myFile = '/111/2.txt';//填你自己实际存在的文件\r\n\r\n    //注意一下目标的路径，这里如果填333/2.txt 则表示文件移动到111/333/2.txt\r\n    //如果填/333/2.txt 则表示文件移动到bucket根目录下的333/2.txt\r\n    //如果填/111/3.txt 则相当于把2.txt改名成3.txt\r\n    var newFile = '/333/2.txt';\r\n    var overWrite = 1;//0 表示不覆盖 1表示覆盖\r\n    cos.moveFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);\r\n});\r\n\r\n```\r\n\r\n## 反馈\r\n\r\n欢迎提issue\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentyun%2Fcos-js-sdk-v4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencentyun%2Fcos-js-sdk-v4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentyun%2Fcos-js-sdk-v4/lists"}