feat: 文件上传 进度条

apps/web-antd/src/api/core/upload.ts

@@ -1,12 +1,27 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
 import { requestClient } from '#/api/request';
 
+/**
+ * Axios上传进度事件
+ */
+export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
+
 /**
  * 通过单文件上传接口
  * @param file 上传的文件
+ * @param onUploadProgress 上传进度事件 非必传
  * @returns 上传结果
  */
-export function uploadApi(file: Blob | File) {
+export function uploadApi(
-  return requestClient.upload('/resource/oss/upload', { file });
+  file: Blob | File,
+  onUploadProgress?: AxiosProgressEvent,
+) {
+  return requestClient.upload(
+    '/resource/oss/upload',
+    { file },
+    { onUploadProgress, timeout: 60_000 },
+  );
 }
 /**
  * 默认上传结果

apps/web-antd/src/components/upload/src/file-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';
@@ -26,7 +30,10 @@ const props = withDefaults(
      * 需自行改造 ./helper/checkFileType方法
      */
     accept?: string[];
-    api?: (...args: any[]) => Promise<any>;
+    api?: (
+      file: Blob | File,
+      onUploadProgress?: AxiosProgressEvent,
+    ) => Promise<AxiosResponse<any>>;
     disabled?: boolean;
     helpText?: string;
     // 最大数量的文件，Infinity不限制
@@ -144,12 +151,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;
@@ -191,6 +205,7 @@ function getValue() {
       :max-count="maxNumber"
       :multiple="multiple"
       list-type="text"
+      :progress="{ showInfo: true }"
       @remove="handleRemove"
     >
       <div v-if="fileList && fileList.length < maxNumber">