From 33662b3dea8d25c8cb8e0c6b1755d9941fb9b3d0 Mon Sep 17 00:00:00 2001 From: inottn Date: Sun, 21 Jul 2024 17:43:39 +0800 Subject: [PATCH] feat(Uploader): expose reuploadFile method (#13012) --- packages/vant/src/uploader/README.md | 1 + packages/vant/src/uploader/README.zh-CN.md | 1 + packages/vant/src/uploader/Uploader.tsx | 17 ++++----- packages/vant/src/uploader/test/index.spec.ts | 38 +++++++++++++++++-- packages/vant/src/uploader/types.ts | 1 + 5 files changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md index d54d68e33..f9d241334 100644 --- a/packages/vant/src/uploader/README.md +++ b/packages/vant/src/uploader/README.md @@ -393,6 +393,7 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Uploader | --- | --- | --- | --- | | closeImagePreview | Close full screen image preview | - | - | | chooseFile | Trigger choosing files, works with the user action context only because of browser security | - | - | +| reuploadFile `4.9.3` | Trigger choosing files, choosing a new file will overwrite the previously uploaded file, works with the user action context only because of browser security | _index: number_ | - | ### Types diff --git a/packages/vant/src/uploader/README.zh-CN.md b/packages/vant/src/uploader/README.zh-CN.md index 26ad05982..89593eb0e 100644 --- a/packages/vant/src/uploader/README.zh-CN.md +++ b/packages/vant/src/uploader/README.zh-CN.md @@ -416,6 +416,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： | --- | --- | --- | --- | | closeImagePreview | 关闭全屏的图片预览 | - | - | | chooseFile | 主动调起文件选择，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | - | - | +| reuploadFile `4.9.3` | 主动调起文件选择，选择新文件后将覆盖原先上传的文件，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | _index: number_ | - | ### 类型定义 diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 0f7c4f8d0..7c43dadab 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -279,11 +279,12 @@ export default defineComponent({ emit('delete', item, getDetail(index)); }; - const reuploadImage = (index: number) => { + const reuploadFile = (index: number) => { isReuploading.value = true; reuploadIndex.value = index; nextTick(() => chooseFile()); }; + const onInputClick = () => { if (!isReuploading.value) { reuploadIndex.value = -1; @@ -319,7 +320,7 @@ export default defineComponent({ } onDelete={() => deleteFile(item, index)} onPreview={() => previewImage(item)} - onReupload={() => reuploadImage(index)} + onReupload={() => reuploadFile(index)} {...pick(props, ['name', 'lazyLoad'])} {...previewData} /> @@ -335,12 +336,7 @@ export default defineComponent({ const onClickUpload = (event: MouseEvent) => emit('clickUpload', event); const renderUpload = () => { - if (props.modelValue.length >= +props.maxCount && !props.reupload) { - return; - } - - const hideUploader = - props.modelValue.length >= +props.maxCount && props.reupload; + const lessThanMax = props.modelValue.length < +props.maxCount; const Input = props.readonly ? null : ( @@ -371,7 +367,7 @@ export default defineComponent({ return (
({ chooseFile, + reuploadFile, closeImagePreview, }); useCustomFieldValue(() => props.modelValue); diff --git a/packages/vant/src/uploader/test/index.spec.ts b/packages/vant/src/uploader/test/index.spec.ts index a08d3b4bc..d670d31be 100644 --- a/packages/vant/src/uploader/test/index.spec.ts +++ b/packages/vant/src/uploader/test/index.spec.ts @@ -1,6 +1,6 @@ import { nextTick } from 'vue'; import { cdnURL } from '../../../docs/site'; -import Uploader, { type UploaderFileListItem } from '..'; +import Uploader, { type UploaderFileListItem, type UploaderInstance } from '..'; import { mount, later, triggerDrag, trigger } from '../../../test'; import type { Numeric } from '../../utils'; @@ -686,11 +686,10 @@ test('should emit clickReUpload event when props reupload true', async () => { props: { maxCount: 1, modelValue: [{ url: IMAGE }], + reupload: true, }, }); - expect(wrapper.find('.van-uploader__upload').exists()).toBeFalsy(); - await wrapper.setProps({ reupload: true }); expect(wrapper.find('.van-uploader__upload').style.display).toBe('none'); const previewItem = wrapper.find( @@ -706,3 +705,36 @@ test('should emit clickReUpload event when props reupload true', async () => { await trigger(input, 'change'); expect(wrapper.emitted('update:modelValue')?.[0][0]).toHaveLength(1); }); + +test('expose reuploadFile method', async () => { + const onUpdate = vi.fn(); + const wrapper = mount(Uploader, { + props: { + maxCount: 2, + modelValue: [{ url: IMAGE }, { url: PDF }], + 'onUpdate:modelValue': onUpdate, + }, + }); + + const {reuploadFile} = (wrapper.vm as UploaderInstance); + expect(reuploadFile).toBeTypeOf('function'); + + const input = wrapper.find('.van-uploader__input'); + Object.defineProperty(input.element, 'files', { + get: vi.fn().mockReturnValue([mockFile]), + }); + + reuploadFile(1); + await trigger(input, 'change'); + expect(onUpdate.mock.calls[0][0]).toMatchObject([ + { url: IMAGE }, + { file: mockFile }, + ]); + + reuploadFile(0); + await trigger(input, 'change'); + expect(onUpdate.mock.calls[1][0]).toMatchObject([ + { file: mockFile }, + { url: PDF }, + ]); +}); diff --git a/packages/vant/src/uploader/types.ts b/packages/vant/src/uploader/types.ts index 4d0aa9ea1..c08dfc2c0 100644 --- a/packages/vant/src/uploader/types.ts +++ b/packages/vant/src/uploader/types.ts @@ -41,6 +41,7 @@ export type UploaderAfterRead = ( export type UploaderExpose = { chooseFile: () => void; closeImagePreview: () => void; + reuploadFile: (index: number) => void; }; export type UploaderInstance = ComponentPublicInstance<