feat: 对ossId回显的支持
This commit is contained in:
parent
62da4edae4
commit
103b1a6f4a
@ -1,7 +1,7 @@
|
|||||||
import type { OssFile } from './model';
|
|
||||||
|
|
||||||
import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
|
import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
|
||||||
|
|
||||||
|
import type { OssFile } from './model';
|
||||||
|
|
||||||
import { ContentTypeEnum } from '#/api/helper';
|
import { ContentTypeEnum } from '#/api/helper';
|
||||||
import { requestClient } from '#/api/request';
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ export function ossList(params?: PageQuery) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function ossInfo(ossIds: IDS) {
|
export function ossInfo(ossIds: IDS) {
|
||||||
return requestClient.get<OssFile>(`${Api.ossInfo}/${ossIds}`);
|
return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2,15 +2,13 @@
|
|||||||
import type { UploadFile, UploadProps } from 'ant-design-vue';
|
import type { UploadFile, UploadProps } from 'ant-design-vue';
|
||||||
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
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 { 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 { checkImageFileType, defaultImageAccept } from './helper';
|
||||||
import { UploadResultStatus } from './typing';
|
import { UploadResultStatus } from './typing';
|
||||||
@ -37,7 +35,7 @@ const props = withDefaults(
|
|||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
// support xxx.xxx.xx
|
// support xxx.xxx.xx
|
||||||
// 返回的字段 默认url
|
// 返回的字段 默认url
|
||||||
resultField?: 'fileName' | 'ossId' | 'url' | string;
|
resultField?: 'fileName' | 'ossId' | 'url';
|
||||||
value?: string | string[];
|
value?: string | string[];
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
@ -50,7 +48,7 @@ const props = withDefaults(
|
|||||||
accept: () => defaultImageAccept,
|
accept: () => defaultImageAccept,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
api: uploadApi,
|
api: uploadApi,
|
||||||
resultField: '',
|
resultField: 'url',
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
const emit = defineEmits(['change', 'update:value', 'delete']);
|
const emit = defineEmits(['change', 'update:value', 'delete']);
|
||||||
@ -74,7 +72,7 @@ const isFirstRender = ref<boolean>(true);
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.value,
|
() => props.value,
|
||||||
(v) => {
|
async (v) => {
|
||||||
if (isInnerOperate.value) {
|
if (isInnerOperate.value) {
|
||||||
isInnerOperate.value = false;
|
isInnerOperate.value = false;
|
||||||
return;
|
return;
|
||||||
@ -90,19 +88,40 @@ watch(
|
|||||||
}
|
}
|
||||||
// 直接赋值 可能为string | string[]
|
// 直接赋值 可能为string | string[]
|
||||||
value = v;
|
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)) {
|
if (item && isString(item)) {
|
||||||
return {
|
withUrlList.push({
|
||||||
uid: `${-i}`,
|
uid: item, // ossId作为uid 方便getValue获取
|
||||||
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
|
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
|
||||||
status: 'done',
|
status: 'done',
|
||||||
url: item,
|
url: resp?.[0]?.url,
|
||||||
};
|
});
|
||||||
} else if (item && isObject(item)) {
|
} 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) {
|
if (!isFirstRender.value) {
|
||||||
emit('change', value);
|
emit('change', value);
|
||||||
@ -200,12 +219,17 @@ async function customRequest(info: UploadRequestOption<any>) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getValue() {
|
function getValue() {
|
||||||
|
console.log(fileList.value);
|
||||||
const list = (fileList.value || [])
|
const list = (fileList.value || [])
|
||||||
.filter((item) => item?.status === UploadResultStatus.DONE)
|
.filter((item) => item?.status === UploadResultStatus.DONE)
|
||||||
.map((item: any) => {
|
.map((item: any) => {
|
||||||
if (item?.response && props?.resultField) {
|
if (item?.response && props?.resultField) {
|
||||||
return item?.response?.[props.resultField];
|
return item?.response?.[props.resultField];
|
||||||
}
|
}
|
||||||
|
// ossId兼容 uid为ossId直接返回
|
||||||
|
if (props.resultField === 'ossId' && item.uid) {
|
||||||
|
return item.uid;
|
||||||
|
}
|
||||||
// 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
|
// 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
|
||||||
if (item?.url) {
|
if (item?.url) {
|
||||||
return item.url;
|
return item.url;
|
||||||
|
@ -1,11 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<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 { 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');
|
const resultField = ref<'ossId' | 'url'>('ossId');
|
||||||
|
|
||||||
@ -17,7 +14,7 @@ const fieldOptions = [
|
|||||||
];
|
];
|
||||||
const fileAccept = ['xlsx', 'word', 'pdf'];
|
const fileAccept = ['xlsx', 'word', 'pdf'];
|
||||||
|
|
||||||
const signleImage = ref<string>('');
|
const signleImage = ref<string>('1745443704356782081');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -27,7 +24,11 @@ const signleImage = ref<string>('');
|
|||||||
:show-icon="true"
|
:show-icon="true"
|
||||||
message="新特性: 设置max-number为1时, 会被绑定为string而非string[]类型 省去手动转换"
|
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" />
|
<JsonPreview :data="signleImage" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
|
<div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
|
||||||
|
Loading…
Reference in New Issue
Block a user