feat: 上传emit
This commit is contained in:
parent
f16afe657e
commit
6c4d15136f
@ -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>
|
||||
|
||||
<!--
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user