refactor: 图片上传自定义预览逻辑

apps/web-antd/src/components/upload/src/file-upload.vue

@@ -3,8 +3,6 @@
 去除使用`file-type`库进行文件类型检测 在Safari无法使用
 -->
 <script setup lang="ts">
-import type { UploadFile } from 'ant-design-vue';
-
 import type { BaseUploadProps } from './props';
 
 import { computed } from 'vue';
@@ -20,11 +18,6 @@ import { defaultFileAcceptExts, defaultFilePreview } from './helper';
 import { useUpload } from './hook';
 
 interface FileUploadProps extends BaseUploadProps {
-  /**
-   * 自定义文件预览逻辑 比如: 你可以改为下载
-   * @param file file
-   */
-  preview?: (file: UploadFile) => Promise<void> | void;
   /**
    * 是否支持拖拽上传
    * @default false

apps/web-antd/src/components/upload/src/image-upload.vue

@@ -3,7 +3,10 @@
 去除使用`file-type`库进行文件类型检测 在Safari无法使用
 -->
 <script setup lang="ts">
-import type { UploadListType } from 'ant-design-vue/es/upload/interface';
+import type {
+  UploadFile,
+  UploadListType,
+} from 'ant-design-vue/es/upload/interface';
 
 import type { BaseUploadProps } from './props';
 
@@ -11,6 +14,7 @@ import { $t, I18nT } from '@vben/locales';
 
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { Image, ImagePreviewGroup, Upload } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
 
 import { uploadApi } from '#/api';
 
@@ -55,6 +59,15 @@ const {
 
 const { previewVisible, previewImage, handleCancel, handlePreview } =
   useImagePreview();
+
+function currentPreview(file: UploadFile) {
+  // 有自定义预览逻辑走自定义
+  if (isFunction(props.preview)) {
+    return props.preview(file);
+  }
+  // 否则走默认预览
+  return handlePreview(file);
+}
 </script>
 
 <template>
@@ -70,7 +83,7 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
       :multiple="multiple"
       :before-upload="beforeUpload"
       :custom-request="customRequest"
-      @preview="handlePreview"
+      @preview="currentPreview"
       @change="handleChange"
       @remove="handleRemove"
     >

apps/web-antd/src/components/upload/src/props.d.ts

@@ -72,4 +72,11 @@ export interface BaseUploadProps {
    * @default false
    */
   keepMissingId?: boolean;
+  /**
+   * 自定义文件/图片预览逻辑 比如: 你可以改为下载
+   * 图片上传默认为预览
+   * 文件上传默认为window.open
+   * @param file file
+   */
+  preview?: (file: UploadFile) => Promise<void> | void;
 }