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;
 }

apps/web-antd/src/views/演示使用自行删除/upload/index.vue

@@ -17,6 +17,7 @@ const multipleFileId = ref<string[]>(['1905191167882518529']);
 function handlePreview(file: UploadFile) {
   Modal.info({
     content: h('div', { class: 'break-all' }, JSON.stringify(file, null, 2)),
+    maskClosable: true,
   });
 }
 </script>
@@ -34,7 +35,7 @@ function handlePreview(file: UploadFile) {
         当前绑定值: {{ singleFileId }}
       </Card>
 
-      <Card title="多图片上传, maxCount参数控制" size="small">
+      <Card title="多图片上传, maxCount参数控制(开启深度监听)" size="small">
         <ImageUpload
           v-model:value="multipleImageId"
           :max-count="3"
@@ -43,14 +44,18 @@ function handlePreview(file: UploadFile) {
         当前绑定值: {{ multipleImageId }}
       </Card>
 
-      <Card title="多文件上传, maxCount参数控制" size="small">
-        <FileUpload v-model:value="multipleFileId" :max-count="3" />
+      <Card title="多文件上传, maxCount参数控制(开启深度监听)" size="small">
+        <FileUpload
+          v-model:value="multipleFileId"
+          :max-count="3"
+          :deep-watch="true"
+        />
         当前绑定值: {{ multipleFileId }}
       </Card>
 
       <Card title="文件自定义预览逻辑" size="small">
         <Alert
-          message="你可以自定义预览逻辑, 比如改为下载, 回调参数为文件信息(图片有默认预览逻辑 不支持自定义)"
+          message="你可以自定义预览逻辑, 比如改为下载, 回调参数为文件信息"
           class="my-2"
         />
         <FileUpload
@@ -59,7 +64,13 @@ function handlePreview(file: UploadFile) {
           :preview="handlePreview"
           :help-message="false"
         />
-        当前绑定值: {{ multipleFileId }}
+        <ImageUpload
+          class="mt-3"
+          v-model:value="multipleImageId"
+          :max-count="3"
+          :preview="handlePreview"
+          :help-message="false"
+        />
       </Card>
 
       <Card title="文件拖拽上传" size="small">