feat: add input upload

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

@@ -2,9 +2,7 @@
 import type { UploadFile, UploadProps } from 'ant-design-vue';
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 
-import type { AxiosResponse } from '@vben/request';
-
-import type { UploadListType } from './typing';
+import type { FileUploadProps } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
@@ -22,46 +20,20 @@ import { useUpload, useUploadType } from './use-upload';
 
 defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 
-const props = withDefaults(
-  defineProps<{
-    // 根据后缀，或者其他
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
-    directory?: string;
-    disabled?: boolean;
-    helpText?: string;
-    listType?: UploadListType;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
-  }>(),
-  {
-    value: () => [],
-    directory: undefined,
-    disabled: false,
-    listType: 'picture-card',
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => defaultImageAccepts,
-    multiple: false,
-    api: undefined,
-    resultField: '',
-    showDescription: true,
-  },
-);
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  directory: undefined,
+  disabled: false,
+  listType: 'picture-card',
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => defaultImageAccepts,
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: true,
+});
 const emit = defineEmits(['change', 'update:value', 'delete']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
@@ -130,7 +102,7 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
   });
 }
 
-const handlePreview = async (file: UploadFile) => {
+async function handlePreview(file: UploadFile) {
   if (!file.url && !file.preview) {
     file.preview = await getBase64<string>(file.originFileObj!);
   }
@@ -141,9 +113,9 @@ const handlePreview = async (file: UploadFile) => {
     previewImage.value.slice(
       Math.max(0, previewImage.value.lastIndexOf('/') + 1),
     );
-};
+}
 
-const handleRemove = async (file: UploadFile) => {
+async function handleRemove(file: UploadFile) {
   if (fileList.value) {
     const index = fileList.value.findIndex((item) => item.uid === file.uid);
     index !== -1 && fileList.value.splice(index, 1);
@@ -153,14 +125,14 @@ const handleRemove = async (file: UploadFile) => {
     emit('change', value);
     emit('delete', file);
   }
-};
+}
 
-const handleCancel = () => {
+function handleCancel() {
   previewOpen.value = false;
   previewTitle.value = '';
-};
+}
 
-const beforeUpload = async (file: File) => {
+async function beforeUpload(file: File) {
   const { maxSize, accept } = props;
   const isAct = checkImgType(file, accept);
   if (!isAct) {
@@ -177,7 +149,7 @@ const beforeUpload = async (file: File) => {
     setTimeout(() => (isLtMsg.value = true), 1000);
   }
   return (isAct && !isLt) || Upload.LIST_IGNORE;
-};
+}
 
 async function customRequest(info: UploadRequestOption<any>) {
   let { api } = props;