feat(Uploader): support set the preview size separately (#10438)

packages/vant/src/uploader/README.md

@@ -200,6 +200,23 @@ export default {
 </style>
 ```
 
+### Preview Size
+
+Using `preview-size` prop to custom the size of preview image.
+
+```html
+<!-- The default unit is px -->
+<van-uploader v-model="fileList" preview-size="60" />
+<!-- Support other units, such as rem, vh, vw -->
+<van-uploader v-model="fileList" preview-size="5rem" />
+```
+
+You can set the width and height separately.
+
+```html
+<van-uploader v-model="fileList" :preview-size="[60, 40]" />
+```
+
 ### Before Read
 
 ```html
@@ -263,7 +280,6 @@ import { Toast } from 'vant';
 export default {
   setup() {
     const fileList = ref([
-      { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
       {
         url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg',
         deletable: true,
@@ -273,9 +289,7 @@ export default {
       },
       {
         url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
-        deletable: true,
         imageFit: 'contain',
-        previewSize: 120,
       },
     ]);
 
@@ -293,7 +307,7 @@ export default {
 | v-model | List of uploaded files | _FileListItem[]_ | - |
 | accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` |
 | name | Input name | _number \| string_ | - |
-| preview-size | Size of preview image | _number \| string_ | `80px` |
+| preview-size | Size of preview image | _number \| string \| Array_ | `80px` |
 | preview-image | Whether to show image preview | _boolean_ | `true` |
 | preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` |
 | preview-options | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - |

packages/vant/src/uploader/README.zh-CN.md

@@ -217,6 +217,23 @@ export default {
 </style>
 ```
 
+### 自定义预览大小
+
+通过 `preview-size` 属性定义预览图和上传区域的大小。
+
+```html
+<!-- 不指定单位，默认为 px -->
+<van-uploader v-model="fileList" preview-size="60" />
+<!-- 指定单位，支持 rem, vh, vw -->
+<van-uploader v-model="fileList" preview-size="5rem" />
+```
+
+将 `preview-size` 设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。
+
+```html
+<van-uploader v-model="fileList" :preview-size="[60, 40]" />
+```
+
 ### 上传前置处理
 
 通过传入 `beforeRead` 函数可以在上传前进行校验和处理，返回 `true` 表示校验通过，返回 `false` 表示校验失败。支持返回 `Promise` 对 file 对象进行自定义处理，例如压缩图片。
@@ -284,19 +301,16 @@ import { Toast } from 'vant';
 export default {
   setup() {
     const fileList = ref([
-      { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
       {
         url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg',
         deletable: true,
         beforeDelete: () => {
-          Toast('自定义单个预览图片的事件和样式');
+          Toast('删除前置处理');
         },
       },
       {
         url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
-        deletable: true,
         imageFit: 'contain',
-        previewSize: 120,
       },
     ]);
 
@@ -314,7 +328,7 @@ export default {
 | v-model | 已上传的文件列表 | _FileListItem[]_ | - |
 | accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` |
 | name | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - |
-| preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string_ | `80px` |
+| preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string \| Array_ | `80px` |
 | preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
 | preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |
 | preview-options | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - |

packages/vant/src/uploader/Uploader.tsx

@@ -13,7 +13,6 @@ import {
   extend,
   isPromise,
   truthProp,
-  numericProp,
   Interceptor,
   getSizeStyle,
   makeArrayProp,
@@ -70,7 +69,9 @@ const uploaderProps = {
   modelValue: makeArrayProp<UploaderFileListItem>(),
   beforeRead: Function as PropType<UploaderBeforeRead>,
   beforeDelete: Function as PropType<Interceptor>,
-  previewSize: numericProp,
+  previewSize: [Number, String, Array] as PropType<
+    number | string | Array<number | string>
+  >,
   previewImage: truthProp,
   previewOptions: Object as PropType<ImagePreviewOptions>,
   previewFullImage: truthProp,

packages/vant/src/uploader/UploaderPreviewItem.tsx

@@ -28,7 +28,9 @@ export default defineComponent({
     imageFit: String as PropType<ImageFit>,
     lazyLoad: Boolean,
     deletable: Boolean,
-    previewSize: numericProp,
+    previewSize: [Number, String, Array] as PropType<
+      number | string | Array<number | string>
+    >,
     beforeDelete: Function as PropType<Interceptor>,
   },
 
@@ -96,18 +98,18 @@ export default defineComponent({
     };
 
     const renderPreview = () => {
-      const { item } = props;
+      const { item, lazyLoad, imageFit, previewSize } = props;
 
       if (isImageFile(item)) {
         return (
           <Image
             v-slots={{ default: renderCover }}
-            fit={props.imageFit}
+            fit={imageFit}
             src={item.content || item.url}
             class={bem('preview-image')}
-            width={props.previewSize}
+            width={Array.isArray(previewSize) ? previewSize[0] : previewSize}
-            height={props.previewSize}
+            height={Array.isArray(previewSize) ? previewSize[1] : previewSize}
-            lazyLoad={props.lazyLoad}
+            lazyLoad={lazyLoad}
             onClick={onPreview}
           />
         );

packages/vant/src/uploader/demo/index.vue

@@ -21,9 +21,10 @@ const t = useTranslate({
     overSizeTip: '文件大小不能超过 500kb',
     invalidType: '请上传 jpg 格式图片',
     customUpload: '自定义上传样式',
+    previewSize: '自定义预览大小',
     previewCover: '自定义预览样式',
-    customPreviewImage: '自定义单个图片预览',
     deleteMessage: '删除前置处理',
+    customPreviewImage: '自定义单个图片预览',
   },
   'en-US': {
     status: 'Upload Status',
@@ -39,9 +40,10 @@ const t = useTranslate({
     overSizeTip: 'File size cannot exceed 500kb',
     invalidType: 'Please upload an image in jpg format',
     customUpload: 'Custom Upload Area',
+    previewSize: 'Preview Size',
     previewCover: 'Preview Cover',
-    customPreviewImage: 'Custom single prevew image',
     deleteMessage: 'Before Delete',
+    customPreviewImage: 'Custom single preview image',
   },
 });
 
@@ -61,7 +63,6 @@ const fileList4 = ref([
 ]);
 
 const fileList5 = ref<UploaderFileListItem[]>([
-  { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
   {
     url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg',
     deletable: true,
@@ -71,9 +72,7 @@ const fileList5 = ref<UploaderFileListItem[]>([
   },
   {
     url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
-    deletable: true,
     imageFit: 'contain',
-    previewSize: 120,
   },
 ]);
 
@@ -99,6 +98,12 @@ const previewCoverFiles = ref<UploaderFileListItem[]>([
   },
 ]);
 
+const previewSizeFiles = ref<UploaderFileListItem[]>([
+  {
+    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
+  },
+]);
+
 const beforeRead = (file: File | File[]) => {
   if (Array.isArray(file)) {
     return true;
@@ -185,6 +190,10 @@ const onOversize = (file: UploaderFileListItem, detail: unknown) => {
     </van-uploader>
   </demo-block>
 
+  <demo-block :title="t('previewSize')">
+    <van-uploader v-model="previewSizeFiles" preview-size="60" />
+  </demo-block>
+
   <demo-block :title="t('beforeRead')">
     <van-uploader v-model="fileList3" :before-read="beforeRead" />
   </demo-block>

packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap

@@ -274,6 +274,44 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"
+             style="width: 60px; height: 60px;"
+        >
+          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
+               class="van-image__img"
+               style="object-fit: cover;"
+          >
+          <div class="van-image__loading">
+            <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            </i>
+          </div>
+        </div>
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
+          <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+          </i>
+        </div>
+      </div>
+      <div class="van-uploader__upload"
+           style="width: 60px; height: 60px;"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+        </i>
+        <input type="file"
+               class="van-uploader__input"
+               accept="image/*"
+        >
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div class="van-uploader">
     <div class="van-uploader__wrapper">
@@ -306,18 +344,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-uploader">
     <div class="van-uploader__wrapper">
-      <div class="van-uploader__preview">
-        <div class="van-image van-uploader__preview-image">
-          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
-               class="van-image__img"
-               style="object-fit: cover;"
-          >
-          <div class="van-image__loading">
-            <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
-            </i>
-          </div>
-        </div>
-      </div>
       <div class="van-uploader__preview">
         <div class="van-image van-uploader__preview-image">
           <img src="https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg"
@@ -339,9 +365,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
       <div class="van-uploader__preview">
-        <div class="van-image van-uploader__preview-image"
+        <div class="van-image van-uploader__preview-image">
-             style="width: 120px; height: 120px;"
-        >
           <img src="https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg"
                class="van-image__img"
                style="object-fit: contain;"
@@ -351,14 +375,6 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div role="button"
-             class="van-uploader__preview-delete"
-             tabindex="0"
-             aria-label="Delete"
-        >
-          <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
-          </i>
-        </div>
       </div>
       <div class="van-uploader__upload">
         <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">

packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap

@@ -197,42 +197,6 @@ exports[`preview-cover slot 1`] = `
 </div>
 `;
 
-exports[`preview-size prop 1`] = `
-<div class="van-uploader">
-  <div class="van-uploader__wrapper">
-    <div class="van-uploader__preview">
-      <div class="van-uploader__file"
-           style="width: 30px; height: 30px;"
-      >
-        <i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
-        </i>
-        <div class="van-uploader__file-name van-ellipsis">
-          test.jpg
-        </div>
-      </div>
-      <div role="button"
-           class="van-uploader__preview-delete"
-           tabindex="0"
-           aria-label="Delete"
-      >
-        <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
-        </i>
-      </div>
-    </div>
-    <div class="van-uploader__upload"
-         style="width: 30px; height: 30px;"
-    >
-      <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
-      </i>
-      <input type="file"
-             class="van-uploader__input"
-             accept="image/*"
-      >
-    </div>
-  </div>
-</div>
-`;
-
 exports[`render preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

packages/vant/src/uploader/test/index.spec.ts

@@ -360,16 +360,39 @@ test('max-count prop', async () => {
   ).toHaveLength(1);
 });
 
-test('preview-size prop', async () => {
+test('should allow to custom size by preview-size prop', async () => {
   const wrapper = mount(Uploader, {
     props: {
-      modelValue: [],
+      modelValue: [{ file: mockFile }],
       previewSize: 30,
     },
   });
 
-  await wrapper.setProps({ modelValue: [{ file: mockFile }] });
+  console.log(wrapper.html());
-  expect(wrapper.html()).toMatchSnapshot();
+  const image = wrapper.find('.van-uploader__file');
+  expect(image.style.width).toEqual('30px');
+  expect(image.style.height).toEqual('30px');
+
+  const upload = wrapper.find('.van-uploader__upload');
+  expect(upload.style.width).toEqual('30px');
+  expect(upload.style.height).toEqual('30px');
+});
+
+test('should allow to set width and height separately by preview-size prop', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      modelValue: [{ file: mockFile }],
+      previewSize: [20, 10],
+    },
+  });
+
+  const image = wrapper.find('.van-uploader__file');
+  expect(image.style.width).toEqual('20px');
+  expect(image.style.height).toEqual('10px');
+
+  const upload = wrapper.find('.van-uploader__upload');
+  expect(upload.style.width).toEqual('20px');
+  expect(upload.style.height).toEqual('10px');
 });
 
 test('deletable prop', async () => {

packages/vant/src/utils/format.ts

@@ -11,9 +11,15 @@ export function addUnit(value?: string | number): string | undefined {
 }
 
 export function getSizeStyle(
-  originSize?: string | number
+  originSize?: string | number | Array<string | number>
 ): CSSProperties | undefined {
   if (isDef(originSize)) {
+    if (Array.isArray(originSize)) {
+      return {
+        width: addUnit(originSize[0]),
+        height: addUnit(originSize[1]),
+      };
+    }
     const size = addUnit(originSize);
     return {
       width: size,