fix:【ele】文件上传的 bug

This commit is contained in:
YunaiV
2025-10-25 10:56:33 +08:00
parent c27b33bae8
commit ec48c8859b
2 changed files with 17 additions and 22 deletions

View File

@@ -11,7 +11,7 @@ import type { UploadListType } from './typing';
import type { AxiosProgressEvent } from '#/api/infra/file'; import type { AxiosProgressEvent } from '#/api/infra/file';
import { nextTick, ref, toRefs, watch } from 'vue'; import { ref, toRefs, watch } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
@@ -25,6 +25,7 @@ import { useUpload, useUploadType } from './use-upload';
defineOptions({ name: 'ImageUpload', inheritAttrs: false }); defineOptions({ name: 'ImageUpload', inheritAttrs: false });
// TODO @xingyu这个要不要抽时间看看upload 组件,和 antd 要不要进一步对齐下;(主要是代码风格。微信沟通~~~
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
// 根据后缀,或者其他 // 根据后缀,或者其他
@@ -208,6 +209,20 @@ async function customRequest(options: UploadRequestOptions) {
} as unknown as UploadProgressEvent); } as unknown as UploadProgressEvent);
}; };
const res = await api?.(options.file, progressEvent); const res = await api?.(options.file, progressEvent);
// TODO @xingyu看看有没更好的实现代码。
// 更新 fileList 中对应文件的 URL 为服务器返回的真实 URL
const uploadedFile = fileList.value.find(
(file) => file.uid === (options.file as any).uid,
);
if (uploadedFile) {
const responseData = res?.data || res;
uploadedFile.url =
props.resultField && responseData[props.resultField]
? responseData[props.resultField]
: responseData.url || responseData;
}
options.onSuccess!(res); options.onSuccess!(res);
ElMessage.success($t('ui.upload.uploadSuccess')); ElMessage.success($t('ui.upload.uploadSuccess'));
@@ -237,21 +252,6 @@ function getValue() {
} }
return list; return list;
} }
// 编辑按钮:触发文件选择
const triggerEdit = () => {
if (props.disabled) return;
// 只查找当前 upload-box 下的 input
nextTick(() => {
const uploadBox = document.querySelector('.upload-box');
if (uploadBox) {
const input = uploadBox.querySelector(
'input[type="file"]',
) as HTMLInputElement | null;
if (input) input.click();
}
});
};
</script> </script>
<template> <template>
@@ -277,10 +277,6 @@ const triggerEdit = () => {
<IconifyIcon icon="lucide:circle-plus" /> <IconifyIcon icon="lucide:circle-plus" />
<span>详情</span> <span>详情</span>
</div> </div>
<div v-if="!disabled" class="handle-icon" @click="triggerEdit">
<IconifyIcon icon="lucide:edit" />
<span>编辑</span>
</div>
<div <div
v-if="!disabled" v-if="!disabled"
class="handle-icon" class="handle-icon"
@@ -317,6 +313,7 @@ const triggerEdit = () => {
</div> </div>
</ElUpload> </ElUpload>
</template> </template>
<!-- TODO @xingyu相比 antd 来说EL 有点丑;貌似是这里展示的位置不太对; -->
<div v-if="showDescription" class="mt-2 text-xs text-gray-500"> <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
{{ getStringAccept }} {{ getStringAccept }}
</div> </div>

View File

@@ -147,7 +147,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
placeholder: '请输入权限', placeholder: '请输入权限',
}, },
rules: 'required',
}, },
{ {
fieldName: 'resourceIds', fieldName: 'resourceIds',
@@ -156,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
placeholder: '请输入资源', placeholder: '请输入资源',
}, },
rules: 'required',
}, },
{ {
fieldName: 'additionalInformation', fieldName: 'additionalInformation',