fix:【ele】文件上传的 bug
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user