feat: 文件上传 进度条+提示文字

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

@@ -2,6 +2,10 @@
 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 { AxiosProgressEvent } from '#/api';
+
 import { ref, toRefs, watch } from 'vue';
 
 import { $t } from '@vben/locales';
@@ -25,7 +29,10 @@ const props = withDefaults(
      * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
      */
     accept?: string[];
-    api?: (...args: any[]) => Promise<any>;
+    api?: (
+      file: Blob | File,
+      onUploadProgress?: AxiosProgressEvent,
+    ) => Promise<AxiosResponse<any>>;
     disabled?: boolean;
     helpText?: string;
     // eslint-disable-next-line no-use-before-define
@@ -39,6 +46,10 @@ const props = withDefaults(
     // support xxx.xxx.xx
     // 返回的字段 默认url
     resultField?: 'fileName' | 'ossId' | 'url';
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
     value?: string | string[];
   }>(),
   {
@@ -52,6 +63,7 @@ const props = withDefaults(
     multiple: false,
     api: uploadApi,
     resultField: 'url',
+    showDescription: true,
   },
 );
 const emit = defineEmits(['change', 'update:value', 'delete']);
@@ -204,12 +216,19 @@ async function customRequest(info: UploadRequestOption<any>) {
     return;
   }
   try {
-    const res = await api?.(info.file);
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, progressEvent);
     /**
      * 由getValue处理 传对象过去
      * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
      */
     info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
     // 获取
     const value = getValue();
     isInnerOperate.value = true;
@@ -264,6 +283,7 @@ function getValue() {
       :list-type="listType"
       :max-count="maxNumber"
       :multiple="multiple"
+      :progress="{ showInfo: true }"
       @preview="handlePreview"
       @remove="handleRemove"
     >
@@ -272,6 +292,16 @@ function getValue() {
         <div style="margin-top: 8px">{{ $t('component.upload.upload') }}</div>
       </div>
     </Upload>
+    <div
+      v-if="showDescription"
+      class="mt-2 flex flex-wrap items-center text-[14px]"
+    >
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
     <Modal
       :footer="null"
       :open="previewOpen"