1 <template>
2 <div>
3 <el-upload
4 ref="upload"
5 class="upload"
6 :drag="drag"
7 :disabled="disabled"
8 :multiple="multiple"
9 :auto-upload="autoUpload"
10 :show-file-list="showFileList"
11 :with-credentials="withCredentials"
12
13 :limit="limit"
14 :accept="accept"
15 :list-type="listType"
16
17 :name="name"
18 :action="action"
19 :data="extraParams"
20 :headers="requestHeaders"
21
22 :http-request="isRequest ? handleHttpRequest : undefined"
23
24 :on-error="handleError"
25 :on-exceed="handleExceed"
26 :on-change="handleChange"
27 :on-remove="handleRemove"
28 :on-success="hendleSuccess"
29 :on-preview="handlePreview"
30 :on-progress="handleProgress"
31
32 :before-upload="handleBeforeUpload"
33 :before-remove="handleBeforeRemove"
34
35
36 :file-list="fileList"
37 >
38 <slot></slot>
39 <slot name="trigger"></slot>
40 <div slot="tip">
41 <slot name="tip"></slot>
42 </div>
43 <div v-if="isSlotFile" slot="file" slot-scope="scope">
44 <slot name="file" v-bind="scope"></slot>
45 </div>
46 </el-upload>
47 </div>
48 </template>
49
50 <script>
51 import Sortable from 'sortablejs';
52 export default {
53 name: 'customUpload',
54 props: {
55 // 属性
56 isRequest: {
57 type: Boolean,
58 default: () => false
59 },
60 isSlotFile: {
61 type: Boolean,
62 default: () => false
63 },
64 drag: {
65 type: Boolean,
66 default: () => false
67 },
68 sortable: {
69 type: Boolean,
70 default: () => false
71 },
72 disabled: {
73 type: Boolean,
74 default: () => false
75 },
76 multiple: {
77 type: Boolean,
78 default: () => false
79 },
80 autoUpload: {
81 type: Boolean,
82 default: () => true
83 },
84 showFileList: {
85 type: Boolean,
86 default: () => true
87 },
88 withCredentials: {
89 type: Boolean,
90 default: () => false
91 },
92 // 文件限制
93 limit: {
94 type: Number,
95 default: () => 1
96 },
97 maxSize: {
98 type: Number,
99 default: () => 100 * 1024
100 },
101 accept: {
102 type: String,
103 default: () => '.jpg,.JPG,.png,.PNG'
104 },
105 listType: {
106 type: String,
107 default: () => 'text'
108 },
109 imgWidth: {
110 type: Number,
111 default: () => 0
112 },
113 imgHeight: {
114 type: Number,
115 default: () => 0
116 },
117 // 文件上传参数
118 name: {
119 type: String,
120 default: () => 'file'
121 },
122 action: {
123 type: String,
124 default: () => ''
125 },
126 extraParams: {
127 type: Object,
128 default: () => ({})
129 },
130 requestHeaders: {
131 type: Object,
132 default: () => ({})
133 },
134
135 // 上传事件
136 one rror: { type: Function, default: function () { } },
137 onExceed: { type: Function, default: function () { } },
138 onChange: { type: Function, default: function () { } },
139 onRemove: { type: Function, default: function () { } },
140 onSuccess: { type: Function, default: function () { } },
141 onPreview: { type: Function, default: function () { } },
142 onProgress: { type: Function, default: function () { } },
143 beforeUpload: { type: Function, default: function () { return true; } },
144 beforeRemove: { type: Function, default: function () { return true; } },
145
146 httpRequest: { type: Function, default: function () { } },
147
148 customList: {
149 type: Array,
150 default: () => []
151 }
152 },
153 data() {
154 return {
155 fileList: []
156 }
157 },
158 watch: {
159 fileList: {
160 deep: true,
161 immediate: true,
162 handler(val) {
163 this.$emit('update:customList', val);
164 }
165 },
166 customList: {
167 deep: true,
168 immediate: true,
169 handler(val) {
170 if(!this.fileList.length) {
171 this.fileList = val;
172 }
173 }
174 }
175 },
176 computed: {
177
178 },
179 mounted() {
180 let _this = this;
181 if (this.sortable) {
182 var list = this.$el.querySelector('.el-upload-list');
183 Sortable.create(list, {
184 onEnd: (ev) => {
185 let arr = _this.fileList;
186 arr[ev.oldIndex] = arr.splice(ev.newIndex, 1, arr[ev.oldIndex])[0];
187 },
188 });
189 }
190 },
191 methods: {
192 // 清空
193 clearFiles() {
194 this.$refs['upload']['clearFiles']();
195 },
196
197 // 提交
198 submit() {
199 this.$refs['upload']['submit']();
200 },
201
202 // 取消
203 abort() {
204 this.$refs['upload']['abort']();
205 },
206
207
208 // 文件上传事件
209 handleError(err, file, fileList) {
210 this.onError(err, file, fileList);
211 },
212
213 handleExceed(files, fileList) {
214 this.onExceed(files, fileList);
215 },
216
217 handleChange(file, fileList) {
218 this.onChange(file, fileList);
219 },
220
221 handleRemove(file, fileList) {
222 this.fileList = fileList;
223 this.onRemove(file, fileList);
224 },
225
226 hendleSuccess(response, file, fileList) {
227 response.name = file.name;
228 response.url = file.url;
229 this.fileList.push(response);
230 this.onSuccess(response, file, fileList);
231 },
232
233 handlePreview(file) {
234 this.onPreview(file);
235 },
236
237 handleProgress(event, file, fileList) {
238 this.onProgress(event, file, fileList);
239 },
240
241 // 文件上传前操作
242 handleBeforeUpload(file) {
243 let accept = this.accept;
244 let maxSize = this.maxSize;
245 let isMaxSize = file.size < maxSize;
246 let isOkExt = accept.indexOf(file.name.substring(file.name.lastIndexOf('.'))) >= 0;
247
248 if (!isOkExt) {
249 accept = accept.replace(/\,\./g, '/');
250 accept = accept.replace('.', '');
251 this.$message.error(`只能上传${accept}格式的文件`);
252 return false;
253 }
254
255 if (!isMaxSize) {
256 const { size, sizeType } = this.sizeTypes(maxSize);
257 this.$message.error(`上传文件大小不能超过${size}${sizeType}`);
258 return false;
259 }
260
261 if (this.imgWidth && this.imgHeight) {
262 let result = this.scaling({ file, width: this.imgWidth, height: this.imgHeight });
263
264 if (!result) {
265 this.$message.error(`请上传规定图片比例`);
266 return false;
267 }
268 }
269
270 return this.beforeUpload(file);
271 },
272
273 handleBeforeRemove(file) {
274 return this.beforeRemove(file);
275 },
276
277 // 自定义上传
278 handleHttpRequest(files) {
279 this.httpRequest(files);
280 },
281
282 // 文件大小类型
283 sizeTypes(maxSize) {
284 if (maxSize >= 1024 * 1024) {
285 let size = parseInt(maxSize / 1024 / 1024);
286 return {
287 size,
288 sizeType: 'M'
289 }
290 } else if (maxSize >= 1024) {
291 const size = parseInt(maxSize / 1024);
292 return {
293 size,
294 sizeType: 'kb'
295 }
296 } else {
297 return {
298 size: maxSize,
299 sizeType: 'b'
300 };
301 }
302 },
303
304 // 图标比例
305 scaling({ file, width, height }) {
306 return new Promise((resolve, reject) => {
307 let _URL = window.URL || window.webkitURL;
308 let image = new Image();
309 image.onload = function () {
310 let valid = image.width == width && image.height == height;
311 valid ? resolve(true) : reject(false);
312 };
313 image.src = _URL.createObjectURL(file);
314 }).then(() => { return file }, () => {
315 return Promise.reject(false)
316 });
317 }
318 }
319 }
320 </script>
标签：return,default,upload,fileList,element,ui,file,false,type From： https://www.cnblogs.com/MyCode1990/p/16798091.html