fix(Uploader): failed to resetInput

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()}
           </Image>
         );
       }
@@ -107,7 +106,7 @@ export default {
           <div class={[bem('file-name'), 'van-ellipsis']}>
             {item.file ? item.file.name : item.url}
           </div>
-          {renderPreviewCover()}
+          {renderCover()}
         </div>
       );
     };
@@ -115,7 +114,7 @@ export default {
     return () => (
       <div class={bem('preview')}>
         {renderPreview()}
-        {renderPreviewMask()}
+        {renderMask()}
         {renderDeleteIcon()}
       </div>
     );

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;
+      if (isOversize(items, props.maxSize)) {
-
-      const hasOversize = isOversize(items, props.maxSize);
-
-      if (hasOversize) {
         if (Array.isArray(items)) {
-          const result = findOversizeFiles(items);
+          const result = filterFiles(items, props.maxSize);
-          validFiles = result.valid;
+          items = result.valid;
-          emit('oversize', result.oversizeFiles, getDetail());
+          emit('oversize', result.invalid, getDetail());
+
+          if (!items.length) {
+            return;
+          }
         } else {
           emit('oversize', items, getDetail());
           return;
         }
       }
 
-      const isValidFiles = Boolean(
+      emit('update:modelValue', [...props.modelValue, ...toArray(items)]);
-        Array.isArray(validFiles) ? validFiles.length : validFiles
-      );
-
-      if (isValidFiles) {
-        emit('update:modelValue', [
-          ...props.modelValue,
-          ...toArray(validFiles),
-        ]);
 
       if (props.afterRead) {
-          props.afterRead(validFiles, getDetail());
+        props.afterRead(items, getDetail());
-        }
       }
     };
 
@@ -289,7 +271,7 @@ export default createComponent({
 
       const Input = (
         <input
-          ref="input"
+          ref={inputRef}
           type="file"
           class={bem('input')}
           accept={props.accept}

src/uploader/utils.ts

@@ -29,13 +29,6 @@ export function readFileContent(file: File, resultType: ResultType) {
   });
 }
 
-export function isOversize(
-  items: FileListItem | FileListItem[],
-  maxSize: number | string
-): boolean {
-  return toArray(items).some((item) => 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 {