diff --git a/apps/web-antd/src/components/upload/src/image-upload.vue b/apps/web-antd/src/components/upload/src/image-upload.vue index f0c0242f..ecd9e9e1 100644 --- a/apps/web-antd/src/components/upload/src/image-upload.vue +++ b/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; + api?: ( + file: Blob | File, + onUploadProgress?: AxiosProgressEvent, + ) => Promise>; 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) { 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() {
{{ $t('component.upload.upload') }}
+
+ 请上传不超过 +
{{ maxSize }}MB
+ 的 +
{{ accept.join('/') }}
+ 格式文件 +