feat: 上传emit

This commit is contained in:
dap 2025-03-30 13:55:02 +08:00
parent f16afe657e
commit 6c4d15136f
4 changed files with 31 additions and 7 deletions

View File

@ -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>
<!--

View File

@ -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);

View File

@ -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();

View File

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