mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Uploader: optimize code
This commit is contained in:
parent
b1111b4026
commit
537ecc521e
@ -1,4 +1,5 @@
|
|||||||
import { use, suffixPx } from '../utils';
|
import { use, suffixPx } from '../utils';
|
||||||
|
import { toArray, readFile, isOversize } from './utils';
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import Image from '../image';
|
import Image from '../image';
|
||||||
|
|
||||||
@ -56,55 +57,37 @@ export default sfc({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
files = files.length === 1 ? files[0] : [].slice.call(files, 0);
|
files = files.length === 1 ? files[0] : [].slice.call(files);
|
||||||
|
|
||||||
if (!files || (this.beforeRead && !this.beforeRead(files, this.detail))) {
|
if (this.beforeRead && !this.beforeRead(files, this.detail)) {
|
||||||
this.resetInput();
|
this.resetInput();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const oversize = isOversize(files, this.maxSize);
|
||||||
|
|
||||||
if (Array.isArray(files)) {
|
if (Array.isArray(files)) {
|
||||||
const maxCount = this.maxCount - this.fileList.length;
|
const maxCount = this.maxCount - this.fileList.length;
|
||||||
files = files.slice(0, maxCount);
|
|
||||||
|
|
||||||
Promise.all(files.map(this.readFile)).then(contents => {
|
if (files.length > maxCount) {
|
||||||
let oversize = false;
|
files = files.slice(0, maxCount);
|
||||||
const payload = files.map((file, index) => {
|
|
||||||
if (file.size > this.maxSize) {
|
|
||||||
oversize = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
Promise.all(files.map(file => readFile(file, this.resultType))).then(contents => {
|
||||||
file: files[index],
|
const fileList = files.map((file, index) => ({
|
||||||
|
file,
|
||||||
content: contents[index]
|
content: contents[index]
|
||||||
};
|
}));
|
||||||
});
|
|
||||||
|
|
||||||
this.onAfterRead(payload, oversize);
|
this.onAfterRead(fileList, oversize);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.readFile(files).then(content => {
|
readFile(files, this.resultType).then(content => {
|
||||||
this.onAfterRead({ file: files, content }, files.size > this.maxSize);
|
this.onAfterRead({ file: files, content }, oversize);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
readFile(file) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
|
|
||||||
reader.onload = event => {
|
|
||||||
resolve(event.target.result);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.resultType === 'dataUrl') {
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else if (this.resultType === 'text') {
|
|
||||||
reader.readAsText(file);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onAfterRead(files, oversize) {
|
onAfterRead(files, oversize) {
|
||||||
if (oversize) {
|
if (oversize) {
|
||||||
this.$emit('oversize', files, this.detail);
|
this.$emit('oversize', files, this.detail);
|
||||||
@ -112,21 +95,13 @@ export default sfc({
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.resetInput();
|
this.resetInput();
|
||||||
this.updateFileList(files);
|
this.$emit('input', [...this.fileList, ...toArray(files)]);
|
||||||
|
|
||||||
if (this.afterRead) {
|
if (this.afterRead) {
|
||||||
this.afterRead(files, this.detail);
|
this.afterRead(files, this.detail);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
updateFileList(files) {
|
|
||||||
if (!Array.isArray(files)) {
|
|
||||||
files = [files];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('input', [...this.fileList, ...files]);
|
|
||||||
},
|
|
||||||
|
|
||||||
resetInput() {
|
resetInput() {
|
||||||
/* istanbul ignore else */
|
/* istanbul ignore else */
|
||||||
if (this.$refs.input) {
|
if (this.$refs.input) {
|
||||||
|
27
packages/uploader/utils.js
Normal file
27
packages/uploader/utils.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
export function toArray(item) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [item];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function readFile(file, resultType) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = event => {
|
||||||
|
resolve(event.target.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (resultType === 'dataUrl') {
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
} else if (resultType === 'text') {
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isOversize(files, maxSize) {
|
||||||
|
return toArray(files).some(file => file.size > maxSize);
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user