feat: 对ossId回显的支持

This commit is contained in:
dap 2025-01-03 15:27:03 +08:00
parent 62da4edae4
commit 103b1a6f4a
3 changed files with 55 additions and 30 deletions

View File

@ -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<OssFile>(`${Api.ossInfo}/${ossIds}`);
return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
}
/**

View File

@ -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<boolean>(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, // ossIduid 便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<any>) {
}
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 uidossId
if (props.resultField === 'ossId' && item.uid) {
return item.uid;
}
// init{url: 'xx'}
if (item?.url) {
return item.url;

View File

@ -1,11 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import { JsonPreview, Page } from '@vben/common-ui';
import { Alert, RadioGroup } from 'ant-design-vue';
import { FileUpload, ImageUpload } from '#/components/upload';
import { JsonPreview, Page } from '@vben/common-ui';
import { Alert, RadioGroup } from 'ant-design-vue';
import { ref } from 'vue';
const resultField = ref<'ossId' | 'url'>('ossId');
@ -17,7 +14,7 @@ const fieldOptions = [
];
const fileAccept = ['xlsx', 'word', 'pdf'];
const signleImage = ref<string>('');
const signleImage = ref<string>('1745443704356782081');
</script>
<template>
@ -27,7 +24,11 @@ const signleImage = ref<string>('');
:show-icon="true"
message="新特性: 设置max-number为1时, 会被绑定为string而非string[]类型 省去手动转换"
/>
<ImageUpload v-model:value="signleImage" :max-number="1" />
<ImageUpload
v-model:value="signleImage"
:max-number="1"
result-field="ossId"
/>
<JsonPreview :data="signleImage" />
</div>
<div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">