?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
  
<!DOCTYPE html>
<html>
<head>
    <title>QCloud COS SDK V4</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
    <link href="./bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./docs.min.css">
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./crypto.js"></script>
    <script type="text/javascript" src="../dist/cos-js-sdk-v4.js"></script>
 
    <script type="text/javascript">
        $(function () {
 
//TODO 以下几个值请确保填上再调用示例里的sdk方法
//具体可以到https://console.qcloud.com/cos 进行查看
            var bucket = 'jiangshengxin';
            var appid = '1253330311';
            var sid = 'AKID9C3iNrIKK8nGZgtMuJWXN2Vv9D5nd333';
            var skey = 'vgJkz22uaSAyeCYihT5WlpiU8as592dadw';
            var region = 'gz';
//TODO 以上几个值请确保填上再调用示例里的sdk方法
 
            var myFolder = '/';//需要操作的目录
 
//初始化逻辑
//特别注意: JS-SDK使用之前请先到console.qcloud.com/cos 对相应的Bucket进行跨域设置
            var cos = new CosCloud({
                appid: appid, // APPID 必填参数
                bucket: bucket, // bucketName 必填参数
                region: region, // 地域信息 必填参数 华南地区填gz 华东填sh 华北填tj
                getAppSign: function (callback) {//获取签名 必填参数
 
// 方法一(推荐线上使用):搭建鉴权服务器,构造请求参数获取签名,推荐实际线上业务使用,优点是安全性好,不会暴露自己的私钥
// $.get('../server/auth.php', callback);
 
// 方法二(前端调试使用):直接在浏览器前端计算签名,需要获取自己的accessKey和secretKey, 一般在调试阶段使用
                    var self = this;
                    var random = parseInt(Math.random() * Math.pow(2, 32));
                    var now = parseInt(Date.now() / 1000);
                    var e = now + 600; //签名过期时间为当前+600s
                    var path = ''//多次签名这里填空
                    var str = 'a=' + self.appid + '&k=' + sid + '&e=' + e + '&t=' + now + '&r=' + random + '&f=' + path + '&b=' + self.bucket;
                    var sha1Res = CryptoJS.HmacSHA1(str, skey); // 这里使用CryptoJS计算sha1值,你也可以用其他开源库或自己实现
                    var strWordArray = CryptoJS.enc.Utf8.parse(str);
                    var resWordArray = sha1Res.concat(strWordArray);
                    var res = resWordArray.toString(CryptoJS.enc.Base64);
 
                    callback(res);
 
                },
                getAppSignOnce: function (callback) {//单次签名,参考上面的注释即可
 
// 方法一(推荐线上使用):搭建鉴权服务器,构造请求参数获取签名,推荐实际线上业务使用,优点是安全性好,不会暴露自己的私钥
// $.get('../server/auth.php', {path: self.path}, callback);
 
// 方法二(前端调试使用):直接在浏览器前端计算签名,需要获取自己的accessKey和secretKey, 一般在调试阶段使用
                    var self = this;
                    var random = parseInt(Math.random() * Math.pow(2, 32));
                    var now = parseInt(Date.now() / 1000);
                    var e = 0; // 单次签名 expire==0
                    var path = self.path;
                    var str = 'a=' + self.appid + '&k=' + sid + '&e=' + e + '&t=' + now + '&r=' + random + '&f=' + path + '&b=' + self.bucket;
                    var sha1Res = CryptoJS.HmacSHA1(str, skey); // 这里使用CryptoJS计算sha1值,你也可以用其他开源库或自己实现
                    var strWordArray = CryptoJS.enc.Utf8.parse(str);
                    var resWordArray = sha1Res.concat(strWordArray);
                    var res = resWordArray.toString(CryptoJS.enc.Base64);
 
                    callback(res);
 
                }
            });
 
            var successCallBack = function (result) {
                console.log('request success.');
                $("#result").val(JSON.stringify(result));
            };
 
            var errorCallBack = function (result) {
                result = result || {};
                console.log('request error:', result && result.message);
                $("#result").val(result.responseText || 'error');
            };
 
            var progressCallBack = function (curr, sha1) {
                var sha1CheckProgress = ((sha1 * 100).toFixed(2) || 100) + '%';
                var uploadProgress = ((curr || 0) * 100).toFixed(2) + '%';
                var msg = 'upload progress:' + uploadProgress + '; sha1 check:' + sha1CheckProgress + '.';
                console.log(msg);
                $("#result").val(msg);
            };
 
            var lastTaskId;
            var taskReady = function (taskId) {
                lastTaskId = taskId;
            };
 
//上传文件,适合小于20M的文件上传
            $('#uploadFile').on('click'function () {
                $('#js-file').off('change').on('change'function (e) {
                    var file = e.target.files[0];
// 分片上传过程可能会有 op=upload_slice_list 的 POST 请求返回 404,不会影响上传:https://github.com/tencentyun/cos-js-sdk-v4/issues/16
                    cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, taskReady);//insertOnly==0 表示允许覆盖文件 1表示不允许
                    $('#form')[0].reset();
                    return false;
                });
 
                setTimeout(function () {
                    $('#js-file').click();
                }, 0);
 
                return false;
            });
 
 
//分片上传文件,当选择大于20M大小的文件的时候用分片上传
            var taskId = 0;
            $('#sliceUploadFile').on('click'function () {
 
 
                $('#js-file').off('change').on('change'function (e) {
                    var file = e.target.files[0];
// 分片上传直接调用uploadFile方法,内部会判断是否需要分片
// 分片上传过程可能会有 op=upload_slice_list 的 POST 请求返回 404,不会影响上传:https://github.com/tencentyun/cos-js-sdk-v4/issues/16
                    taskId = cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, taskReady);//insertOnly==0 表示允许覆盖文件 1表示不允许
 
//分片上传也可以直接调用sliceUploadFile方法,分片大小设置暂定不超过1M
//cos.sliceUploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, 1024*1024);
 
                    $('#form')[0].reset();
                    return false;
                });
 
                setTimeout(function () {
                    $('#js-file').click();
                }, 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/''authority');
            });
 
 
//删除文件
            $('#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);
            });
 
            $('#cancelTask').on('click'function () {
                cos.cancelTask(lastTaskId);
            });
 
        });
    </script>
</head>
<body>
<div class="bs-docs-header" id="content">
    <div class="container">
        <h1>腾讯云COS js-sdk-v4</h1>
    </div>
</div>
<div class="container bs-docs-container">
    <form id="form">
        <input id="js-file" type="file" style="display:none;"/>
    </form>
 
    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="updateFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">updateFolder</a>
        </div>
        <div class="col-md-2"><a id="updateFile" href="javascript:void(0);"
                                 class="btn btn-lg btn-outline">updateFile</a></div>
        <div class="col-md-2"><a id="deleteFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">deleteFolder</a>
        </div>
        <div class="col-md-2"><a id="deleteFile" href="javascript:void(0);"
                                 class="btn btn-lg btn-outline">deleteFile</a></div>
    </div>
    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="getFolderStat" href="javascript:void(0);" class="btn btn-lg btn-outline">getFolderStat</a>
        </div>
        <div class="col-md-2"><a id="getFileStat" href="javascript:void(0);"
                                 class="btn btn-lg btn-outline">getFileStat</a></div>
        <div class="col-md-2"><a id="createFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">createFolder</a>
        </div>
        <div class="col-md-2"><a id="getFolderList" href="javascript:void(0);" class="btn btn-lg btn-outline">getFolderList</a>
        </div>
    </div>
    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="copyFile" href="javascript:void(0);" class="btn btn-lg btn-outline">copyFile</a>
        </div>
        <div class="col-md-2"><a id="moveFile" href="javascript:void(0);" class="btn btn-lg btn-outline">moveFile</a>
        </div>
        <div class="col-md-2"><a id="uploadFile" href="javascript:void(0);"
                                 class="btn btn-lg btn-outline">uploadFile</a></div>
        <div class="col-md-2"><a id="sliceUploadFile" href="javascript:void(0);" class="btn btn-lg btn-outline">sliceUploadFile</a>
        </div>
        <div class="col-md-2"><a id="cancelTask" href="javascript:void(0);"
                                 class="btn btn-lg btn-outline">cancelTask</a></div>
    </div>
    <div class="row" style="padding:20px;">
<textarea id="result" rows="20" cols="100">1.使用js-sdk前请记得到console.qcloud.com/cos 找到对应的bucket进行跨域设置;
2.请您修改本页面里的部分代码,把appid,bucket,region,secretId,secretKey填上,确保正确后再运行示例里的代码;
3.本程序仅用于示例,所以在浏览器端暴露了secretId和secretKey直接计算签名,实际的线上业务请您自己部署获取签名的服务以确保自己的密钥和业务安全 </textarea>
    </div>
</div>
</body>
</html>
 
 
  


---------------------------------------------------------------------------------------------
不忘初心 方得始终!

唯有志存高远,方能风行天下。

道之所存,虽千万人吾往矣! 情之所钟,虽千万里吾念矣~

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。