blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Uploader): render objectUrl to avoid perf issue (#12051)

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

* fix: test case
This commit is contained in:
neverland 2023-07-01 23:37:01 +08:00 committed by GitHub
parent 98d1a430e4
commit a789418366
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/uploader/Uploader.tsx
View File

@ -168,6 +168,7 @@ export default defineComponent({
file, file,
status: '', status: '',
message: '', message: '',
objectUrl: URL.createObjectURL(file),
}; };
if (contents[index]) { if (contents[index]) {
@ -185,6 +186,7 @@ export default defineComponent({
file: files as File, file: files as File,
status: '', status: '',
message: '', message: '',
objectUrl: URL.createObjectURL(files as File),
}; };
if (content) { if (content) {
@ -240,8 +242,8 @@ export default defineComponent({
const imageFiles = props.modelValue.filter(isImageFile); const imageFiles = props.modelValue.filter(isImageFile);
const images = imageFiles const images = imageFiles
.map((item) => { .map((item) => {
if (item.file && !item.url && item.status !== 'failed') { if (item.objectUrl && !item.url && item.status !== 'failed') {
item.url = URL.createObjectURL(item.file); item.url = item.objectUrl;
urls.push(item.url); urls.push(item.url);
} }
return item.url; return item.url;

2
packages/vant/src/uploader/UploaderPreviewItem.tsx
View File

@ -114,7 +114,7 @@ export default defineComponent({
<Image <Image
v-slots={{ default: renderCover }} v-slots={{ default: renderCover }}
fit={imageFit} fit={imageFit}
src={item.content || item.url} src={item.objectUrl || item.content || item.url}
class={bem('preview-image')} class={bem('preview-image')}
width={Array.isArray(previewSize) ? previewSize[0] : previewSize} width={Array.isArray(previewSize) ? previewSize[0] : previewSize}
height={Array.isArray(previewSize) ? previewSize[1] : previewSize} height={Array.isArray(previewSize) ? previewSize[1] : previewSize}

1
packages/vant/src/uploader/types.ts
View File

@ -8,6 +8,7 @@ export type UploaderResultType = 'dataUrl' | 'text' | 'file';
export type UploaderFileListItem = { export type UploaderFileListItem = {
url?: string; url?: string;
file?: File; file?: File;
objectUrl?: string;
content?: string; content?: string;
isImage?: boolean; isImage?: boolean;
status?: '' | 'uploading' | 'done' | 'failed'; status?: '' | 'uploading' | 'done' | 'failed';

3
packages/vant/test/dom.ts
View File

@ -59,6 +59,9 @@ export async function mockScrollTop(value: number) {
return nextTick(); return nextTick();
} }
// js-dom do not implement `URL.createObjectURL`
global.URL.createObjectURL = jest.fn();
mockScrollIntoView(); mockScrollIntoView();
mockHTMLElementOffset(); mockHTMLElementOffset();
mockGetBoundingClientRect({ mockGetBoundingClientRect({