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
| <template>
<div>
<div id="picker">选择文件</div>
<ul class="file-list">
<li class="list" v-for="file in fileList">
<span>{{file.name}}</span>
<span>进度：{{file.percentage}}</span>
</li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
// import '../assets/lib/jquery2.0.0/jquery-2.0.0.js';
import WebUploader from 'webuploader';
const request = {
};
export default {
name: 'HelloWorld',
data() {
return {
options: {
},
file: {},
fileList: []
}
},
mounted() {
this.initWebUpload();
},
methods: {
initWebUpload() {
const options = this.options;
const $this = this;
this.uploader = WebUploader.create({
auto: true, //选完文件后，是否自动上传
swf: '/webuploader-0.1.5/Uploader.swf',
server: 'http://localhost:8081/webuploader/upload',
pick: '#picker',
multiple: true,//选择多个
duplicate: true,//去重,根据文件名字、文件大小和最后修改时间来生成hash Key
chunked: true, //开启分片上传
threads: 30, //并发数
chunkSize : 50 * 1024 * 1024, //每片100M
fileNumLimit: 1024,
fileSizeLimit: 50*1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
fileSingleSizeLimit: 10*1024 * 1024 * 1024, //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
disableGlobalDnd: true, //禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
method: 'POST',
//resize: false //不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
});
// 当有文件被添加进队列的时候，添加到页面预览
this.uploader.on('fileQueued', (file) => {
// this.$emit('fileChange', file);
$this.fileList.push(file);
});
this.uploader.on('uploadStart', (file) => {
// 在这里可以准备好formData的数据
//this.uploader.options.formData.key = this.keyGenerator(file);
});
this.uploader.on('startUpload', (file) => {
// 开始一次上传
// this.fileList = [];
});
// 文件上传过程中创建进度条实时显示。
this.uploader.on('uploadProgress', (file, percentage) => {
// this.$emit('progress', file, percentage);
console.log(file, percentage);
$this.fileList.forEach((item, index) => {
if (item.id === file.id) {
item.percentage = percentage * 100;
$this.fileList.splice(index, 1, item);
return;
}
});
});
this.uploader.on('uploadSuccess', (file, response) => {
// this.$emit('success', file, response);
console.log(file, response);
$this.fileList.forEach((item, index) => {
if (item.id === file.id) {
item.percentage = 100;
$this.fileList.splice(index, 1, item);
return;
}
});
});
this.uploader.on('uploadError', (file, reason) => {
// console.error(reason);
// this.$emit('uploadError', file, reason);
});
this.uploader.on('error', (type) => {
let errorMessage = '';
if (type === 'F_EXCEED_SIZE') {
errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`;
} else if (type === 'Q_EXCEED_NUM_LIMIT') {
errorMessage = '文件上传已达到最大上限数';
} else {
errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;
}
console.error(errorMessage);
// this.$emit('error', errorMessage);
});
this.uploader.on('uploadComplete', (file, response) => {
// this.$emit('complete', file, response);
});
this.uploader.on('uploadFinished', () => {
// 所有文件上传结束
// 重置文件队列
this.uploader.reset();
});
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#picker {
display: inline-block;
width: 100px;
padding: 7px 10px;
border: 1px solid #0099CC;
background: #0099CC;
border-radius: 3px;
color: #fff;
font-size: 12px;
}
#picker input {
display: none;
}
</style>
|
