-
Notifications
You must be signed in to change notification settings - Fork 195
/
StopUpload.vue
134 lines (130 loc) · 3.64 KB
/
StopUpload.vue
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
<template>
<div>
<uploader
browse_button="browse_button"
:url="server_config.url+'/BigFile/'"
chunk_size="2MB"
:max_retries="3"
:filters="{prevent_duplicates:true}"
:FilesAdded="filesAdded"
:BeforeUpload="beforeUpload"
:Error="error"
:UploadComplete="uploadComplete"
@inputUploader="inputUploader"
/>
<el-tag type="warning">自动重传三次</el-tag>
<br/>
<br/>
<el-button type="primary" id="browse_button">选择多个文件</el-button>
<br/>
<el-table
:data="tableData"
style="width: 100%; margin: 10px 10px;">
<el-table-column
label="文件名">
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
label="大小">
<template slot-scope="scope">
<span>{{scope.row.size}}</span>
</template>
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
<span v-if="scope.row.status === -1">正在计算MD5</span>
<span v-if="scope.row.status === 1 && scope.row.percent === 0">MD5计算完成,准备上传</span>
<span v-if="scope.row.status === 4" style="color: brown">上传失败</span>
<span v-if="scope.row.status === 5" style="color: chartreuse">已上传</span>
<el-progress v-if="scope.row.status === 2 || scope.row.status === 1 && scope.row.percent > 0" :text-inside="true" :stroke-width="20" :percentage="scope.row.percent"></el-progress>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="deleteFile(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<br/>
<el-button :disabled="uploading" type="danger" @click="uploadStart()">开始上传</el-button>
<el-button :disabled="!uploading" type="warring" @click="uploadStop()">暂停上传</el-button>
</div>
</template>
<script>
import FileMd5 from '../models/file-md5.js'
import Uploader from './Uploader'
export default {
name: "StopUpload",
data() {
return {
server_config: this.global.server_config,
up: {},
files:[],
tableData: [],
uploading: false
}
},
components: {
'uploader': Uploader
},
watch: {
files: {
handler() {
this.tableData = [];
this.files.forEach((e) => {
this.tableData.push({
name: e.name,
size: e.size,
status: e.status,
id: e.id,
percent: e.percent
});
});
},
deep: true
}
},
methods: {
inputUploader(up) {
this.up = up;
this.files = up.files;
},
filesAdded(up, files) {
files.forEach((f) => {
f.status = -1;
FileMd5(f.getNative(), (e, md5) => {
f["md5"] = md5;
f.status = 1;
});
});
},
deleteFile(id) {
let file = this.up.getFile(id);
this.up.removeFile(file);
},
beforeUpload(up, file) {
up.setOption("multipart_params", {"size":file.size,"md5":file.md5});
},
uploadStart() {
this.uploading = true;
this.up.start();
},
uploadStop() {
this.uploading = false;
this.up.stop();
},
error() {
this.uploading = false;
},
uploadComplete() {
this.uploading = false;
}
}
}
</script>
<style scoped>
</style>