refactor(upload): 修改文件上传组件绑定值为字符串类型

将文件上传组件的双向绑定值从字符串或字符串数组统一修改为字符串类型,使用逗号分隔多个文件ID
简化值处理逻辑,避免数组类型判断和操作
This commit is contained in:
dap
2026-01-20 11:19:32 +08:00
parent 7bb7e8b636
commit 1246f8f77b
3 changed files with 20 additions and 22 deletions

View File

@@ -57,8 +57,8 @@ const CurrentUploadComponent = computed(() => {
}); });
// 双向绑定 ossId // 双向绑定 ossId
const ossIdList = defineModel<string | string[]>('value', { const ossIdList = defineModel<string>('value', {
default: () => [], default: '',
}); });
const { const {

View File

@@ -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 },

View File

@@ -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 {