Skip to content

Commit e194982

Browse files
carsonxucarsonxu
committed
上传队列 demo
1 parent 513a038 commit e194982

File tree

7 files changed

+387
-0
lines changed

7 files changed

+387
-0
lines changed

‎demo/queue/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>COS 上传队列</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
13+
<div class="page">
14+
<h1>COS 上传队列</h1>
15+
<div id="app">
16+
<form id="form">
17+
<input type="file" value="选择上传文件" multiple @change="selectedFile">
18+
</form>
19+
<table class="file-list">
20+
<colgroup>
21+
<col style="width:20%;">
22+
<col style="width:10%;">
23+
<col style="width:40%;">
24+
<col style="width:30%;">
25+
</colgroup>
26+
<tr class="file-item">
27+
<td>文件名</td>
28+
<td>大小</td>
29+
<td>进度</td>
30+
<td class="file-action">操作</td>
31+
</tr>
32+
<tr class="file-item" v-for="item in list">
33+
<td><span class="file-name">{{item.Key}}</span></td>
34+
<td>{{formatSize(item.size)}}</td>
35+
<td>
36+
<span class="file-progress" v-if="item.state==='uploading'">
37+
<span class="file-progress-loaded" :style="'width:'+item.percent*100+'%'"></span>
38+
</span>
39+
<span v-if="item.state==='success'">已完成</span>
40+
<span v-else-if="item.state==='waiting'">等待上传</span>
41+
<span v-else-if="item.state==='checking'">校验中({{parseInt(item.hashPercent*100)}}%)</span>
42+
<span v-else-if="item.state==='paused'">已暂停, 已传{{formatSize(item.loaded)}}</span>
43+
<span v-else-if="item.state==='canceled'">已取消</span>
44+
<span v-else>{{formatSize(item.speed)}}/s, 已传{{formatSize(item.loaded)}} {{parseInt(item.percent*100)}}%</span>
45+
</td>
46+
<td class="file-action">
47+
<a v-if="['waiting','checking','uploading'].includes(item.state)" href="javascript:void(0)" @click="pauseTask(item)">暂停</a>
48+
<a v-if="['error','paused'].includes(item.state)" href="javascript:void(0)" @click="restartTask(item)">开始</a>
49+
<a v-if="item.state!=='canceled'" href="javascript:void(0)" @click="cancelTask(item)">删除</a>
50+
</td>
51+
</tr>
52+
<tr class="file-item" v-if="!list.length">
53+
<td colspan="4" align="center">暂无上传文件</td>
54+
</tr>
55+
</table>
56+
</div>
57+
</div>
58+
59+
<script src="../../dist/cos-js-sdk-v5.js"></script>
60+
<script src="./lodash.core.min.js"></script>
61+
<script src="./vue.min.js"></script>
62+
<script src="./index.js"></script>
63+
64+
</body>
65+
</html>

‎demo/queue/index.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var Bucket = 'test-1250000000';
2+
var Region = 'ap-guangzhou';
3+
4+
var cos = new COS({
5+
FileParallelLimit: 5,
6+
ChunkParallelLimit: 5,
7+
ChunkMbSize: 8 * 1024 * 1024,
8+
getAuthorization: function (options, callback) {
9+
var url = '../../server/sts.php';
10+
var xhr = new XMLHttpRequest();
11+
xhr.open('GET', url, true);
12+
xhr.onload = function (e) {
13+
try {
14+
var data = JSON.parse(e.target.responseText);
15+
} catch (e) {
16+
}
17+
callback({
18+
TmpSecretId: data.credentials && data.credentials.tmpSecretId,
19+
TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
20+
XCosSecurityToken: data.credentials && data.credentials.sessionToken,
21+
ExpiredTime: data.expiredTime,
22+
});
23+
};
24+
xhr.send();
25+
}
26+
});
27+
28+
new Vue({
29+
el: '#app',
30+
data: function () {
31+
return {
32+
FileParallelLimit: 5,
33+
ChunkParallelLimit: 16,
34+
ChunkMbSize: 2,
35+
list: [],
36+
};
37+
},
38+
created: function () {
39+
cos.on('list-update', data => {
40+
this.list = data.list;
41+
});
42+
},
43+
methods: {
44+
formatSize: function (size) {
45+
var i, unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
46+
for (i = 0; i < unit.length && size >= 1024; i++) {
47+
size /= 1024;
48+
}
49+
return (Math.round(size * 100) / 100 || 0) + unit[i];
50+
},
51+
selectedFile: function (e) {
52+
var files = e.target.files;
53+
var list = [].map.call(files, function (f) {
54+
return {
55+
Bucket: Bucket,
56+
Region: Region,
57+
Key: f.name,
58+
Body: f,
59+
};
60+
});
61+
cos.uploadFiles({files: list});
62+
document.getElementById('form').reset();
63+
},
64+
pauseTask: function (task) {
65+
cos.pauseTask(task.id);
66+
},
67+
restartTask: function (task) {
68+
cos.restartTask(task.id);
69+
},
70+
cancelTask: function (task) {
71+
cos.cancelTask(task.id);
72+
},
73+
},
74+
});

‎demo/queue/jquery-3.3.1.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/queue/lodash.core.min.js‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)