refactor: 文件/图片上传重构

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

@@ -5,72 +5,28 @@
 <script setup lang="ts">
 import type { UploadListType } from 'ant-design-vue/es/upload/interface';
 
+import type { BaseUploadProps } from './props';
+
 import { $t, I18nT } from '@vben/locales';
 
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { Image, ImagePreviewGroup, Upload } from 'ant-design-vue';
 
+import { uploadApi } from '#/api';
+
 import { defaultImageAcceptExts } from './helper';
 import { useImagePreview, useUpload } from './hook';
 
-interface Props {
-  /**
-   * 文件上传失败 是否从展示列表中删除
-   * @default true
-   */
-  removeOnError?: boolean;
-  /**
-   * 上传成功 是否展示提示信息
-   * @default true
-   */
-  showSuccessMsg?: boolean;
-  /**
-   * 删除文件前是否需要确认
-   * @default false
-   */
-  removeConfirm?: boolean;
-  /**
-   * 同antdv参数
-   */
-  accept?: string;
-  /**
-   * 附带的请求参数
-   */
-  data?: any;
-  /**
-   * 最大上传图片数量
-   * maxCount为1时 会被绑定为string而非string[]
-   * @default 1
-   */
-  maxCount?: number;
-  /**
-   * 文件最大 单位M
-   * @default 5
-   */
-  maxSize?: number;
-  /**
-   * 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
+interface ImageUploadProps extends BaseUploadProps {
   /**
    * 同antdv的listType
    * @default picture-card
    */
   listType?: UploadListType;
-  /**
-   * 是否显示文案 请上传不超过...
-   * @default true
-   */
-  helpMessage?: boolean;
-  /**
-   * 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
-   * @default false
-   */
-  multiple?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ImageUploadProps>(), {
+  api: () => uploadApi,
   removeOnError: true,
   showSuccessMsg: true,
   removeConfirm: false,
@@ -89,13 +45,12 @@ const ossIdList = defineModel<string | string[]>('value', {
 });
 
 const {
-  uploadUrl,
-  headers,
   acceptFormat,
   handleChange,
   handleRemove,
   beforeUpload,
   innerFileList,
+  customRequest,
 } = useUpload(props, ossIdList);
 
 const { previewVisible, previewImage, handleCancel, handlePreview } =
@@ -107,15 +62,14 @@ const { previewVisible, previewImage, handleCancel, handlePreview } =
     <Upload
       v-model:file-list="innerFileList"
       :list-type="listType"
-      :action="uploadUrl"
-      :headers="headers"
-      :data="data"
       :accept="accept"
       :disabled="disabled"
+      :directory="directory"
       :max-count="maxCount"
       :progress="{ showInfo: true }"
       :multiple="multiple"
       :before-upload="beforeUpload"
+      :custom-request="customRequest"
       @preview="handlePreview"
       @change="handleChange"
       @remove="handleRemove"