From a789418366cbffde8632ef1e68eae58b449989d4 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 1 Jul 2023 23:37:01 +0800
Subject: [PATCH] fix(Uploader): render objectUrl to avoid perf issue (#12051)

* fix(Uploader): render objectUrl to avoid perf issue

* fix: test case
---
 packages/vant/src/uploader/Uploader.tsx            | 6 ++++--
 packages/vant/src/uploader/UploaderPreviewItem.tsx | 2 +-
 packages/vant/src/uploader/types.ts                | 1 +
 packages/vant/test/dom.ts                          | 3 +++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx
index df78937f6..b4bb2c19d 100644
--- a/packages/vant/src/uploader/Uploader.tsx
+++ b/packages/vant/src/uploader/Uploader.tsx
@@ -168,6 +168,7 @@ export default defineComponent({
               file,
               status: '',
               message: '',
+              objectUrl: URL.createObjectURL(file),
             };
 
             if (contents[index]) {
@@ -185,6 +186,7 @@ export default defineComponent({
             file: files as File,
             status: '',
             message: '',
+            objectUrl: URL.createObjectURL(files as File),
           };
 
           if (content) {
@@ -240,8 +242,8 @@ export default defineComponent({
         const imageFiles = props.modelValue.filter(isImageFile);
         const images = imageFiles
           .map((item) => {
-            if (item.file && !item.url && item.status !== 'failed') {
-              item.url = URL.createObjectURL(item.file);
+            if (item.objectUrl && !item.url && item.status !== 'failed') {
+              item.url = item.objectUrl;
               urls.push(item.url);
             }
             return item.url;
diff --git a/packages/vant/src/uploader/UploaderPreviewItem.tsx b/packages/vant/src/uploader/UploaderPreviewItem.tsx
index e3dd14dbe..251b9cf8f 100644
--- a/packages/vant/src/uploader/UploaderPreviewItem.tsx
+++ b/packages/vant/src/uploader/UploaderPreviewItem.tsx
@@ -114,7 +114,7 @@ export default defineComponent({
           <Image
             v-slots={{ default: renderCover }}
             fit={imageFit}
-            src={item.content || item.url}
+            src={item.objectUrl || item.content || item.url}
             class={bem('preview-image')}
             width={Array.isArray(previewSize) ? previewSize[0] : previewSize}
             height={Array.isArray(previewSize) ? previewSize[1] : previewSize}
diff --git a/packages/vant/src/uploader/types.ts b/packages/vant/src/uploader/types.ts
index c4b29dd09..d283b2aed 100644
--- a/packages/vant/src/uploader/types.ts
+++ b/packages/vant/src/uploader/types.ts
@@ -8,6 +8,7 @@ export type UploaderResultType = 'dataUrl' | 'text' | 'file';
 export type UploaderFileListItem = {
   url?: string;
   file?: File;
+  objectUrl?: string;
   content?: string;
   isImage?: boolean;
   status?: '' | 'uploading' | 'done' | 'failed';
diff --git a/packages/vant/test/dom.ts b/packages/vant/test/dom.ts
index a913eb7c3..94b352b0c 100644
--- a/packages/vant/test/dom.ts
+++ b/packages/vant/test/dom.ts
@@ -59,6 +59,9 @@ export async function mockScrollTop(value: number) {
   return nextTick();
 }
 
+// js-dom do not implement `URL.createObjectURL`
+global.URL.createObjectURL = jest.fn();
+
 mockScrollIntoView();
 mockHTMLElementOffset();
 mockGetBoundingClientRect({