feat: 上传emit

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

@@ -3,7 +3,7 @@
 去除使用`file-type`库进行文件类型检测 在Safari无法使用
 -->
 <script setup lang="ts">
-import type { BaseUploadProps } from './props';
+import type { BaseUploadProps, UploadEmits } from './props';
 
 import { computed } from 'vue';
 
@@ -36,6 +36,8 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
   abortOnUnmounted: true,
 });
 
+const emit = defineEmits<UploadEmits>();
+
 /** 返回不同的上传组件 */
 const CurrentUploadComponent = computed(() => {
   if (props.enableDragUpload) {
@@ -56,7 +58,7 @@ const {
   handleRemove,
   beforeUpload,
   innerFileList,
-} = useUpload(props, ossIdList);
+} = useUpload(props, emit, ossIdList);
 </script>
 
 <!--

apps/web-antd/src/components/upload/src/hook.ts

@@ -1,11 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue';
 import type { FileType } from 'ant-design-vue/es/upload/interface';
-import type { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import type {
+  RcFile,
+  UploadRequestOption,
+} from 'ant-design-vue/es/vc-upload/interface';
 
 import type { ModelRef } from 'vue';
 
-import type { BaseUploadProps } from './props';
+import type { BaseUploadProps, UploadEmits } from './props';
 
 import type { AxiosProgressEvent, UploadResult } from '#/api';
 import type { OssFile } from '#/api/system/oss/model';
@@ -78,11 +81,13 @@ export function useImagePreview() {
 /**
  * 图片上传和文件上传的通用hook
  * @param props 组件props
+ * @param emit 事件
  * @param bindValue 双向绑定的idList
  * @returns hook
  */
 export function useUpload(
   props: Readonly<BaseUploadProps>,
+  emit: UploadEmits,
   bindValue: ModelRef<string | string[]>,
 ) {
   // 组件内部维护fileList
@@ -153,6 +158,7 @@ export function useUpload(
         removeCurrentFile(currentFile, fileList);
       }
     }
+    emit('change', info);
   }
 
   function handleRemove(currentFile: UploadFile) {
@@ -166,6 +172,8 @@ export function useUpload(
           1,
         );
       }
+      // 触发remove事件
+      emit('remove', currentFile);
     }
 
     if (!props.removeConfirm) {
@@ -231,6 +239,7 @@ export function useUpload(
       if (props.showSuccessMsg) {
         message.success($t('component.upload.uploadSuccess'));
       }
+      emit('success', info.file as RcFile, res);
     } catch (error: any) {
       console.error(error);
       info.onError!(error);

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

@@ -8,7 +8,7 @@ import type {
   UploadListType,
 } from 'ant-design-vue/es/upload/interface';
 
-import type { BaseUploadProps } from './props';
+import type { BaseUploadProps, UploadEmits } from './props';
 
 import { $t, I18nT } from '@vben/locales';
 
@@ -45,6 +45,8 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
   abortOnUnmounted: true,
 });
 
+const emit = defineEmits<UploadEmits>();
+
 // 双向绑定 ossId
 const ossIdList = defineModel<string | string[]>('value', {
   default: () => [],
@@ -57,7 +59,7 @@ const {
   beforeUpload,
   innerFileList,
   customRequest,
-} = useUpload(props, ossIdList);
+} = useUpload(props, emit, ossIdList);
 
 const { previewVisible, previewImage, handleCancel, handlePreview } =
   useImagePreview();

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

@@ -1,4 +1,9 @@
-import type { UploadApi } from '#/api';
+import type { UploadFile } from 'ant-design-vue';
+import type { RcFile } from 'ant-design-vue/es/vc-upload/interface';
+
+import type { UploadApi, UploadResult } from '#/api';
+
+import { UploadChangeParam } from 'ant-design-vue';
 
 export interface BaseUploadProps {
   /**
@@ -95,3 +100,9 @@ export interface BaseUploadProps {
    */
   abortOnUnmounted?: boolean;
 }
+
+export interface UploadEmits {
+  (e: 'success', file: RcFile, response: UploadResult): void;
+  (e: 'remove', file: UploadFile): void;
+  (e: 'change', info: UploadChangeParam): void;
+}