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 { nextTick, ref, toRefs, watch } from 'vue';
|
||||
import { ref, toRefs, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
@@ -25,6 +25,7 @@ import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
||||
|
||||
// TODO @xingyu:这个要不要抽时间看看,upload 组件,和 antd 要不要进一步对齐下;(主要是代码风格。微信沟通~~~)
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 根据后缀,或者其他
|
||||
@@ -208,6 +209,20 @@ async function customRequest(options: UploadRequestOptions) {
|
||||
} as unknown as UploadProgressEvent);
|
||||
};
|
||||
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);
|
||||
ElMessage.success($t('ui.upload.uploadSuccess'));
|
||||
|
||||
@@ -237,21 +252,6 @@ function getValue() {
|
||||
}
|
||||
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>
|
||||
|
||||
<template>
|
||||
@@ -277,10 +277,6 @@ const triggerEdit = () => {
|
||||
<IconifyIcon icon="lucide:circle-plus" />
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<div v-if="!disabled" class="handle-icon" @click="triggerEdit">
|
||||
<IconifyIcon icon="lucide:edit" />
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!disabled"
|
||||
class="handle-icon"
|
||||
@@ -317,6 +313,7 @@ const triggerEdit = () => {
|
||||
</div>
|
||||
</ElUpload>
|
||||
</template>
|
||||
<!-- TODO @xingyu:相比 antd 来说,EL 有点丑;貌似是这里展示的位置不太对; -->
|
||||
<div v-if="showDescription" class="mt-2 text-xs text-gray-500">
|
||||
{{ getStringAccept }}
|
||||
</div>
|
||||
|
||||
@@ -147,7 +147,6 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
componentProps: {
|
||||
placeholder: '请输入权限',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'resourceIds',
|
||||
@@ -156,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
componentProps: {
|
||||
placeholder: '请输入资源',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'additionalInformation',
|
||||
|
||||
Reference in New Issue
Block a user