From 1e585b5ce0cc9cf1cfb610b86bef8cb6c4199185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=83=E8=B7=83?= <1650432983@qq.com>
Date: Thu, 20 Jul 2023 20:50:03 +0800
Subject: [PATCH] fix(Uploader): render objectUrl to avoid perf issue (#12106)

---
 packages/vant/src/uploader/Uploader.tsx            | 6 ++++--
 packages/vant/src/uploader/UploaderPreviewItem.tsx | 2 +-
 packages/vant/src/uploader/types.ts                | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx
index ed9e93888..44483e2ed 100644
--- a/packages/vant/src/uploader/Uploader.tsx
+++ b/packages/vant/src/uploader/Uploader.tsx
@@ -158,6 +158,7 @@ export default defineComponent({
               file,
               status: '',
               message: '',
+              objectUrl: URL.createObjectURL(file)
             };
 
             if (contents[index]) {
@@ -175,6 +176,7 @@ export default defineComponent({
             file: files as File,
             status: '',
             message: '',
+            objectUrl: URL.createObjectURL(files as File),
           };
 
           if (content) {
@@ -230,8 +232,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 cfb5d0e68..005dbbe0e 100644
--- a/packages/vant/src/uploader/UploaderPreviewItem.tsx
+++ b/packages/vant/src/uploader/UploaderPreviewItem.tsx
@@ -111,7 +111,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 2109fc6de..13f2203b3 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';