diff --git a/src/uploader/PreviewItem.js b/src/uploader/PreviewItem.js
index d8e0f155d..144662349 100644
--- a/src/uploader/PreviewItem.js
+++ b/src/uploader/PreviewItem.js
@@ -22,7 +22,7 @@ export default {
emits: ['delete', 'preview'],
setup(props, { emit, slots }) {
- const renderPreviewMask = () => {
+ const renderMask = () => {
const { status, message } = props.item;
if (status === 'uploading' || status === 'failed') {
@@ -46,7 +46,6 @@ export default {
const onDelete = (event) => {
const { name, item, index, beforeDelete } = props;
-
event.stopPropagation();
callInterceptor({
interceptor: beforeDelete,
@@ -71,7 +70,7 @@ export default {
}
};
- const renderPreviewCover = () => {
+ const renderCover = () => {
if (slots['preview-cover']) {
const { index, item } = props;
return (
@@ -96,7 +95,7 @@ export default {
lazyLoad={props.lazyLoad}
onClick={onPreview}
>
- {renderPreviewCover()}
+ {renderCover()}
);
}
@@ -107,7 +106,7 @@ export default {
{item.file ? item.file.name : item.url}
- {renderPreviewCover()}
+ {renderCover()}
);
};
@@ -115,7 +114,7 @@ export default {
return () => (
{renderPreview()}
- {renderPreviewMask()}
+ {renderMask()}
{renderDeleteIcon()}
);
diff --git a/src/uploader/index.js b/src/uploader/index.js
index cb4bfe2c6..e28cb672a 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -3,7 +3,13 @@ import { ref } from 'vue';
// Utils
import { bem, createComponent } from './shared';
import { isPromise, getSizeStyle, pick } from '../utils';
-import { toArray, isOversize, isImageFile, readFileContent } from './utils';
+import {
+ toArray,
+ isOversize,
+ filterFiles,
+ isImageFile,
+ readFileContent,
+} from './utils';
// Composition
import { usePublicApi } from '../composition/use-public-api';
@@ -98,52 +104,28 @@ export default createComponent({
}
};
- const findOversizeFiles = (files) => {
- const valid = [];
- const oversize = [];
-
- files.forEach((item) => {
- if (item.file && item.file.size > props.maxSize) {
- oversize.push(item);
- } else {
- valid.push(item);
- }
- });
-
- return { valid, oversize };
- };
-
const onAfterRead = (items) => {
resetInput();
- let validFiles = items;
-
- const hasOversize = isOversize(items, props.maxSize);
-
- if (hasOversize) {
+ if (isOversize(items, props.maxSize)) {
if (Array.isArray(items)) {
- const result = findOversizeFiles(items);
- validFiles = result.valid;
- emit('oversize', result.oversizeFiles, getDetail());
+ const result = filterFiles(items, props.maxSize);
+ items = result.valid;
+ emit('oversize', result.invalid, getDetail());
+
+ if (!items.length) {
+ return;
+ }
} else {
emit('oversize', items, getDetail());
return;
}
}
- const isValidFiles = Boolean(
- Array.isArray(validFiles) ? validFiles.length : validFiles
- );
+ emit('update:modelValue', [...props.modelValue, ...toArray(items)]);
- if (isValidFiles) {
- emit('update:modelValue', [
- ...props.modelValue,
- ...toArray(validFiles),
- ]);
-
- if (props.afterRead) {
- props.afterRead(validFiles, getDetail());
- }
+ if (props.afterRead) {
+ props.afterRead(items, getDetail());
}
};
@@ -289,7 +271,7 @@ export default createComponent({
const Input = (
item.file && item.file.size > maxSize);
-}
-
export type FileListItem = {
url?: string;
file?: File;
@@ -45,6 +38,28 @@ export type FileListItem = {
message?: string;
};
+export function isOversize(
+ items: FileListItem | FileListItem[],
+ maxSize: number | string
+): boolean {
+ return toArray(items).some((item) => item.file && item.file.size > maxSize);
+}
+
+export function filterFiles(items: FileListItem[], maxSize: number | string) {
+ const valid: FileListItem[] = [];
+ const invalid: FileListItem[] = [];
+
+ items.forEach((item) => {
+ if (item.file && item.file.size > maxSize) {
+ invalid.push(item);
+ } else {
+ valid.push(item);
+ }
+ });
+
+ return { valid, invalid };
+}
+
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
export function isImageUrl(url: string): boolean {