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 {