发布v2.8.4版本，更新内容请查看：https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN/addon-version-upgrade.md

web/src/components/Upload/src/BasicUpload.vue

@@ -68,16 +68,7 @@
       </n-space>
     </div>
 
-    <!--预览图片-->
-    <n-modal
-      v-model:show="showModal"
-      preset="card"
-      title="预览"
-      :bordered="false"
-      :style="{ width: '520px' }"
-    >
-      <img :src="previewUrl" />
-    </n-modal>
+    <Preview ref="previewRef" />
   </div>
 </template>
 
@@ -86,6 +77,7 @@
   import { EyeOutlined, DeleteOutlined, PlusOutlined, CloudDownloadOutlined } from '@vicons/antd';
   import { basicProps } from './props';
   import { useMessage, useDialog } from 'naive-ui';
+  import Preview from '@/components/FileChooser/src/Preview.vue';
   import { ResultEnum } from '@/enums/httpEnum';
   import componentSetting from '@/settings/componentSetting';
   import { useGlobSetting } from '@/hooks/setting';
@@ -110,6 +102,7 @@
         };
       });
 
+      const previewRef = ref();
       const message = useMessage();
       const dialog = useDialog();
       const uploadTitle = ref(props.fileType === 'image' ? '上传图片' : '上传附件');
@@ -185,9 +178,9 @@
 
       //预览
       function preview(url: string) {
-        state.showModal = true;
-        state.previewUrl = url;
+        previewRef.value.openPreview(url);
       }
+
       //下载
       function download(url: string) {
         window.open(url);
@@ -294,6 +287,8 @@
         uploadTitle,
         fileAvatarCSS,
         getFileExt,
+        Preview,
+        previewRef,
       };
     },
   });

web/src/components/Upload/uploadImage.vue

@@ -26,6 +26,10 @@
     helpText?: string;
   }
 
+  const emit = defineEmits(['update:value']);
+  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
+  const image = ref<string>('');
+  const images = ref<string[]>([]);
   const globSetting = useGlobSetting();
   const urlPrefix = globSetting.urlPrefix || '';
   const { uploadUrl } = globSetting;
@@ -33,10 +37,6 @@
   const uploadHeaders = reactive({
     Authorization: useUserStore.token,
   });
-  const emit = defineEmits(['update:value']);
-  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
-  const image = ref<string>('');
-  const images = ref<string[]>([]);
 
   function uploadChange(list: string | string[]) {
     if (props.maxNumber === 1) {
@@ -48,7 +48,6 @@
     }
   }
 
-  //赋值默认图片显示
   function loadImage() {
     if (props.maxNumber === 1) {
       image.value = props.value as string;