You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.9 KiB
66 lines
2.9 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>COS 上传队列</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<h1>COS 上传队列</h1>
|
|
<div id="app">
|
|
<form id="form">
|
|
<div class="float-right">共{{total}}个文件</div>
|
|
<input type="file" value="选择上传文件" multiple @change="selectedFile">
|
|
</form>
|
|
<table class="file-list">
|
|
<colgroup>
|
|
<col style="width:20%;">
|
|
<col style="width:10%;">
|
|
<col style="width:40%;">
|
|
<col style="width:30%;">
|
|
</colgroup>
|
|
<tr class="file-item">
|
|
<td>文件名</td>
|
|
<td>大小</td>
|
|
<td>进度</td>
|
|
<td class="file-action">操作</td>
|
|
</tr>
|
|
<tr class="file-item" v-for="item in list">
|
|
<td><span class="file-name">{{item.Key}}</span></td>
|
|
<td>{{formatSize(item.size)}}</td>
|
|
<td>
|
|
<span class="file-progress" v-if="item.state==='uploading'">
|
|
<span class="file-progress-loaded" :style="'width:'+item.percent*100+'%'"></span>
|
|
</span>
|
|
<span v-if="item.state==='success'">已完成</span>
|
|
<span v-else-if="item.state==='waiting'">等待上传</span>
|
|
<span v-else-if="item.state==='checking'">校验中({{parseInt(item.hashPercent*100)}}%)</span>
|
|
<span v-else-if="item.state==='paused'">已暂停, 已传{{formatSize(item.loaded)}}</span>
|
|
<span v-else-if="item.state==='canceled'">已取消</span>
|
|
<span v-else>{{formatSize(item.speed)}}/s, 已传{{formatSize(item.loaded)}} {{parseInt(item.percent*100)}}%</span>
|
|
</td>
|
|
<td class="file-action">
|
|
<a v-if="['waiting','checking','uploading'].includes(item.state)" href="javascript:void(0)" @click="pauseTask(item)">暂停</a>
|
|
<a v-if="['error','paused'].includes(item.state)" href="javascript:void(0)" @click="restartTask(item)">开始</a>
|
|
<a v-if="item.state!=='canceled'" href="javascript:void(0)" @click="cancelTask(item)">删除</a>
|
|
</td>
|
|
</tr>
|
|
<tr class="file-item" v-if="!list.length">
|
|
<td colspan="4" align="center">暂无上传文件</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../dist/cos-js-sdk-v5.js"></script>
|
|
<script src="../common/lodash.core.min.js"></script>
|
|
<script src="../common/vue.min.js"></script>
|
|
<script src="./index.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|