mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-10 01:33:14 +08:00
refactor(upload): 修改文件上传组件绑定值为字符串类型
将文件上传组件的双向绑定值从字符串或字符串数组统一修改为字符串类型,使用逗号分隔多个文件ID 简化值处理逻辑,避免数组类型判断和操作
This commit is contained in:
@@ -57,8 +57,8 @@ const CurrentUploadComponent = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 双向绑定 ossId
|
// 双向绑定 ossId
|
||||||
const ossIdList = defineModel<string | string[]>('value', {
|
const ossIdList = defineModel<string>('value', {
|
||||||
default: () => [],
|
default: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export function useImagePreview() {
|
|||||||
export function useUpload(
|
export function useUpload(
|
||||||
props: Readonly<BaseUploadProps>,
|
props: Readonly<BaseUploadProps>,
|
||||||
emit: UploadEmits,
|
emit: UploadEmits,
|
||||||
bindValue: ModelRef<string | string[]>,
|
bindValue: ModelRef<string>,
|
||||||
uploadType: UploadType,
|
uploadType: UploadType,
|
||||||
) {
|
) {
|
||||||
// 组件内部维护fileList
|
// 组件内部维护fileList
|
||||||
@@ -202,11 +202,9 @@ export function useUpload(
|
|||||||
bindValue.value = ossId;
|
bindValue.value = ossId;
|
||||||
} else {
|
} else {
|
||||||
// 给默认值
|
// 给默认值
|
||||||
if (!Array.isArray(bindValue.value)) {
|
const validIds = bindValue.value ? bindValue.value.split(',') : [];
|
||||||
bindValue.value = [];
|
validIds.push(ossId);
|
||||||
}
|
bindValue.value = validIds.join(',');
|
||||||
// 直接使用.value无法触发useForm的更新(原生是正常的) 需要修改地址
|
|
||||||
bindValue.value = [...bindValue.value, ossId];
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -224,10 +222,12 @@ export function useUpload(
|
|||||||
if (props.maxCount === 1) {
|
if (props.maxCount === 1) {
|
||||||
bindValue.value = '';
|
bindValue.value = '';
|
||||||
} else {
|
} else {
|
||||||
(bindValue.value as string[]).splice(
|
const validIds = bindValue.value ? bindValue.value.split(',') : [];
|
||||||
bindValue.value.indexOf(currentFile.uid),
|
const index = validIds.indexOf(currentFile.uid);
|
||||||
1,
|
if (index !== -1) {
|
||||||
);
|
validIds.splice(index, 1);
|
||||||
|
bindValue.value = validIds.join(',');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// 触发remove事件
|
// 触发remove事件
|
||||||
emit('remove', currentFile);
|
emit('remove', currentFile);
|
||||||
@@ -316,7 +316,7 @@ export function useUpload(
|
|||||||
watch(
|
watch(
|
||||||
() => bindValue.value,
|
() => bindValue.value,
|
||||||
async (value) => {
|
async (value) => {
|
||||||
if (value.length === 0) {
|
if (!value) {
|
||||||
// 清空绑定值时,同时清空innerFileList,避免外部使用时还能读取到
|
// 清空绑定值时,同时清空innerFileList,避免外部使用时还能读取到
|
||||||
innerFileList.value = [];
|
innerFileList.value = [];
|
||||||
return;
|
return;
|
||||||
@@ -329,7 +329,8 @@ export function useUpload(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const resp = await ossInfo(value);
|
const ids = value.split(',');
|
||||||
|
const resp = await ossInfo(ids);
|
||||||
function transformFile(info: OssFile) {
|
function transformFile(info: OssFile) {
|
||||||
const cb = { type: 'info', response: info } as const;
|
const cb = { type: 'info', response: info } as const;
|
||||||
|
|
||||||
@@ -353,17 +354,14 @@ export function useUpload(
|
|||||||
// 多文件
|
// 多文件
|
||||||
// 单文件查到了也会走这里的逻辑 filter会报错 需要maxCount判断处理
|
// 单文件查到了也会走这里的逻辑 filter会报错 需要maxCount判断处理
|
||||||
if (
|
if (
|
||||||
resp.length !== value.length &&
|
resp.length !== ids.length &&
|
||||||
!props.keepMissingId &&
|
!props.keepMissingId &&
|
||||||
props.maxCount !== 1
|
props.maxCount !== 1
|
||||||
) {
|
) {
|
||||||
// 给默认值
|
const validIds = ids.filter((ossId) =>
|
||||||
if (!Array.isArray(bindValue.value)) {
|
|
||||||
bindValue.value = [];
|
|
||||||
}
|
|
||||||
bindValue.value = bindValue.value.filter((ossId) =>
|
|
||||||
resp.map((res) => res.ossId).includes(ossId),
|
resp.map((res) => res.ossId).includes(ossId),
|
||||||
);
|
);
|
||||||
|
bindValue.value = validIds.join(',');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true },
|
||||||
|
|||||||
@@ -52,8 +52,8 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
|
|||||||
const emit = defineEmits<UploadEmits>();
|
const emit = defineEmits<UploadEmits>();
|
||||||
|
|
||||||
// 双向绑定 ossId
|
// 双向绑定 ossId
|
||||||
const ossIdList = defineModel<string | string[]>('value', {
|
const ossIdList = defineModel<string>('value', {
|
||||||
default: () => [],
|
default: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|||||||
Reference in New Issue
Block a user