diff --git a/apps/web-antd/src/api/core/upload.ts b/apps/web-antd/src/api/core/upload.ts index 32833b66..a74cb19f 100644 --- a/apps/web-antd/src/api/core/upload.ts +++ b/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) { - return requestClient.upload('/resource/oss/upload', { file }); +export function uploadApi( + file: Blob | File, + onUploadProgress?: AxiosProgressEvent, +) { + return requestClient.upload( + '/resource/oss/upload', + { file }, + { onUploadProgress, timeout: 60_000 }, + ); } /** * 默认上传结果 diff --git a/apps/web-antd/src/components/upload/src/file-upload.vue b/apps/web-antd/src/components/upload/src/file-upload.vue index 45ac17b8..08d20e13 100644 --- a/apps/web-antd/src/components/upload/src/file-upload.vue +++ b/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; + api?: ( + file: Blob | File, + onUploadProgress?: AxiosProgressEvent, + ) => Promise>; disabled?: boolean; helpText?: string; // 最大数量的文件,Infinity不限制 @@ -144,12 +151,19 @@ async function customRequest(info: UploadRequestOption) { 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" >