diff --git a/apps/web-antd/src/api/system/oss/index.ts b/apps/web-antd/src/api/system/oss/index.ts index 139b9260..ded2b422 100644 --- a/apps/web-antd/src/api/system/oss/index.ts +++ b/apps/web-antd/src/api/system/oss/index.ts @@ -1,7 +1,7 @@ -import type { OssFile } from './model'; - import type { ID, IDS, PageQuery, PageResult } from '#/api/common'; +import type { OssFile } from './model'; + import { ContentTypeEnum } from '#/api/helper'; import { requestClient } from '#/api/request'; @@ -18,7 +18,7 @@ export function ossList(params?: PageQuery) { } export function ossInfo(ossIds: IDS) { - return requestClient.get(`${Api.ossInfo}/${ossIds}`); + return requestClient.get(`${Api.ossInfo}/${ossIds}`); } /** 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 7548ea1b..9ccb70fc 100644 --- a/apps/web-antd/src/components/upload/src/image-upload.vue +++ b/apps/web-antd/src/components/upload/src/image-upload.vue @@ -2,15 +2,13 @@ import type { UploadFile, UploadProps } from 'ant-design-vue'; import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; -import { ref, toRefs, watch } from 'vue'; - -import { $t } from '@vben/locales'; - -import { PlusOutlined } from '@ant-design/icons-vue'; -import { message, Modal, Upload } from 'ant-design-vue'; -import { isArray, isFunction, isObject, isString } from 'lodash-es'; - import { uploadApi } from '#/api'; +import { ossInfo } from '#/api/system/oss'; +import { PlusOutlined } from '@ant-design/icons-vue'; +import { $t } from '@vben/locales'; +import { message, Modal, Upload } from 'ant-design-vue'; +import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es'; +import { ref, toRefs, watch } from 'vue'; import { checkImageFileType, defaultImageAccept } from './helper'; import { UploadResultStatus } from './typing'; @@ -37,7 +35,7 @@ const props = withDefaults( multiple?: boolean; // support xxx.xxx.xx // 返回的字段 默认url - resultField?: 'fileName' | 'ossId' | 'url' | string; + resultField?: 'fileName' | 'ossId' | 'url'; value?: string | string[]; }>(), { @@ -50,7 +48,7 @@ const props = withDefaults( accept: () => defaultImageAccept, multiple: false, api: uploadApi, - resultField: '', + resultField: 'url', }, ); const emit = defineEmits(['change', 'update:value', 'delete']); @@ -74,7 +72,7 @@ const isFirstRender = ref(true); watch( () => props.value, - (v) => { + async (v) => { if (isInnerOperate.value) { isInnerOperate.value = false; return; @@ -90,19 +88,40 @@ watch( } // 直接赋值 可能为string | string[] value = v; - fileList.value = _fileList.map((item, i) => { + const withUrlList: UploadProps['fileList'] = []; + for (const item of _fileList) { + // 非ossId情况 + if (props.resultField !== 'ossId') { + if (item && isString(item)) { + withUrlList.push({ + uid: uniqueId(), + name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)), + status: 'done', + url: item, + }); + } else if (item && isObject(item)) { + withUrlList.push(item); + } + return; + } + // ossId情况 + const resp = await ossInfo([item]); if (item && isString(item)) { - return { - uid: `${-i}`, + withUrlList.push({ + uid: item, // ossId作为uid 方便getValue获取 name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)), status: 'done', - url: item, - }; + url: resp?.[0]?.url, + }); } else if (item && isObject(item)) { - return item; + withUrlList.push({ + ...(item as any), + uid: item, + url: resp?.[0]?.url, + }); } - return null; - }) as UploadProps['fileList']; + } + fileList.value = withUrlList; } if (!isFirstRender.value) { emit('change', value); @@ -200,12 +219,17 @@ async function customRequest(info: UploadRequestOption) { } function getValue() { + console.log(fileList.value); const list = (fileList.value || []) .filter((item) => item?.status === UploadResultStatus.DONE) .map((item: any) => { if (item?.response && props?.resultField) { return item?.response?.[props.resultField]; } + // ossId兼容 uid为ossId直接返回 + if (props.resultField === 'ossId' && item.uid) { + return item.uid; + } // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'} if (item?.url) { return item.url; diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue index c5556660..aa2971a6 100644 --- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue +++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue @@ -1,11 +1,8 @@