vue-upload/index.html at master · laivv/vue-upload · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title><%= htmlWebpackPlugin.options.title %></title>
		<% if( htmlWebpackPlugin.options.isProd ){ %>
		<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
		<% } %>
	</head>
	<body>
		<div id="app">
			<% if( htmlWebpackPlugin.options.isProd ){ %>
			<uk-upload
				ref="upload"
				v-model="fileList"
				:token-url="['111','222']"
				:list-type="listType"
				:multiple="true"
				:enable-upload="true"
				:max-file-count="5"
				:show-file-name="true"
				:preview-mode="false"
				:show-file-list="true"
				:max-file-size="0"
				:extensions="[]"
				:before-file-add="beforeFileAdd"
				:on-file-remove="onFileRemove"
				:on-file-click="onFileClick"
				thumb-query="?imgview/w/100/height/50"
			>
			</uk-upload>
			<button @click="getStatus">获取上传状态</button> <button @click="getFileList">获取所有文件</button>
			<button @click="getSuccessList">获取上传成功的文件列表</button>
			<button @click="getErrorList">获取上传失败的文件列表</button>
			<button @click="getUploadingList">获取上传中的文件列表</button>
			<button @click="switchListType">切换列表类型</button> <% } %>
		</div>
		<% if( htmlWebpackPlugin.options.isProd ){ %>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						listType: 'card',
						fileList: [
							'http://vjs.zencdn.net/v/oceans.mp4 ',
							'http://ohjdda8lm.bkt.clouddn.com/course/sample1.mp4',
							'http://yun.it7090.com/video/XHLaunchAd/video02.mp4',
							'http://www.w3school.com.cn/i/movie.ogg',
							'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
							'http://yun.it7090.com/video/XHLaunchAd/video03.mp4',
							'http://yun.it7090.com/video/XHLaunchAd/video01.mp4',
							'不支持的文件测试-unknow',
						],
					};
				},
				methods: {
					beforeFileAdd: function(file) {
						console.log(file);
					},
					onFileRemove: function(file) {
						console.log(file);
						return true;
					},
					onFileClick: function(file) {
						console.log(file);
						return true;
					},
					getStatus: function() {
						var isCompleted = this.$refs.upload.isCompleted();
						console.log(isCompleted);
					},
					getFileList: function() {
						var files = this.$refs.upload.getFiles();
						console.log(files);
					},
					getSuccessList: function() {
						var files = this.$refs.upload.getSuccessFiles();
						console.log(files);
					},
					getErrorList: function() {
						var files = this.$refs.upload.getErrorFiles();
						console.log(files);
					},
					getUploadingList: function() {
						var files = this.$refs.upload.getUploadingFiles();
						console.log(files);
					},
					switchListType: function() {
						this.listType = this.listType == 'card' ? 'text' : 'card';
					},
				},
			});
		</script>
		<% } %>
	</body>
</html>