feat：【antd/ele】文件上传的组件优化

2025-12-27 18:50:42 +08:00
parent a109168c66
commit 63a8d562ce
11 changed files with 710 additions and 644 deletions
--- a/apps/web-antd/src/components/upload/file-upload.vue
+++ b/apps/web-antd/src/components/upload/file-upload.vue
@@ -51,12 +51,12 @@ const { getStringAccept } = useUploadType({
  maxSizeRef: maxSize,
 });

-// 计算当前绑定的值，优先使用 modelValue
+/** 计算当前绑定的值，优先使用 modelValue */
 const currentValue = computed(() => {
  return props.modelValue === undefined ? props.value : props.modelValue;
 });

-// 判断是否使用 modelValue
+/** 判断是否使用 modelValue */
 const isUsingModelValue = computed(() => {
  return props.modelValue !== undefined;
 });
@@ -82,19 +82,21 @@ watch(
      } else {
        value.push(v);
      }
-      fileList.value = value.map((item, i) => {
-        if (item && isString(item)) {
-          return {
-            uid: `${-i}`,
-            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-            status: UploadResultStatus.DONE,
-            url: item,
-          };
-        } else if (item && isObject(item)) {
-          return item;
-        }
-        return null;
-      }) as UploadProps['fileList'];
+      fileList.value = value
+        .map((item, i) => {
+          if (item && isString(item)) {
+            return {
+              uid: `${-i}`,
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: UploadResultStatus.DONE,
+              url: item,
+            };
+          } else if (item && isObject(item)) {
+            return item;
+          }
+          return null;
+        })
+        .filter(Boolean) as UploadProps['fileList'];
    }
    if (!isFirstRender.value) {
      emit('change', value);
@@ -107,6 +109,7 @@ watch(
  },
 );

+/** 处理文件删除 */
 async function handleRemove(file: UploadFile) {
  if (fileList.value) {
    const index = fileList.value.findIndex((item) => item.uid === file.uid);
@@ -120,17 +123,17 @@ async function handleRemove(file: UploadFile) {
  }
 }

-// 处理文件预览
+/** 处理文件预览 */
 function handlePreview(file: UploadFile) {
  emit('preview', file);
 }

-// 处理文件数量超限
+/** 处理文件数量超限 */
 function handleExceed() {
  message.error($t('ui.upload.maxNumber', [maxNumber.value]));
 }

-// 处理上传错误
+/** 处理上传错误 */
 function handleUploadError(error: any) {
  console.error('上传错误:', error);
  message.error($t('ui.upload.uploadError'));
@@ -138,6 +141,11 @@ function handleUploadError(error: any) {
  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
 }

+/**
+ * 上传前校验
+ * @param file 待上传的文件
+ * @returns 是否允许上传
+ */
 async function beforeUpload(file: File) {
  const fileContent = await file.text();
  emit('returnText', fileContent);
@@ -171,7 +179,8 @@ async function beforeUpload(file: File) {
  return true;
 }

-async function customRequest(info: UploadRequestOption<any>) {
+/** 自定义上传请求 */
+async function customRequest(info: UploadRequestOption) {
  let { api } = props;
  if (!api || !isFunction(api)) {
    api = useUpload(props.directory).httpRequest;
@@ -196,7 +205,11 @@ async function customRequest(info: UploadRequestOption<any>) {
  }
 }

-// 处理上传成功
+/**
+ * 处理上传成功
+ * @param res 上传响应结果
+ * @param file 上传的文件
+ */
 function handleUploadSuccess(res: any, file: File) {
  // 删除临时文件
  const index = fileList.value?.findIndex((item) => item.name === file.name);
@@ -228,6 +241,10 @@ function handleUploadSuccess(res: any, file: File) {
  }
 }

+/**
+ * 获取当前文件列表的值
+ * @returns 文件 URL 列表或字符串
+ */
 function getValue() {
  const list = (fileList.value || [])
    .filter((item) => item?.status === UploadResultStatus.DONE)
--- a/apps/web-antd/src/components/upload/image-upload.vue
+++ b/apps/web-antd/src/components/upload/image-upload.vue
@@ -55,12 +55,12 @@ const { getStringAccept } = useUploadType({
  maxSizeRef: maxSize,
 });

-// 计算当前绑定的值，优先使用 modelValue
+/** 计算当前绑定的值，优先使用 modelValue */
 const currentValue = computed(() => {
  return props.modelValue === undefined ? props.value : props.modelValue;
 });

-// 判断是否使用 modelValue
+/** 判断是否使用 modelValue */
 const isUsingModelValue = computed(() => {
  return props.modelValue !== undefined;
 });
@@ -89,19 +89,21 @@ watch(
      } else {
        value.push(v);
      }
-      fileList.value = value.map((item, i) => {
-        if (item && isString(item)) {
-          return {
-            uid: `${-i}`,
-            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-            status: UploadResultStatus.DONE,
-            url: item,
-          };
-        } else if (item && isObject(item)) {
-          return item;
-        }
-        return null;
-      }) as UploadProps['fileList'];
+      fileList.value = value
+        .map((item, i) => {
+          if (item && isString(item)) {
+            return {
+              uid: `${-i}`,
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: UploadResultStatus.DONE,
+              url: item,
+            };
+          } else if (item && isObject(item)) {
+            return item;
+          }
+          return null;
+        })
+        .filter(Boolean) as UploadProps['fileList'];
    }
    if (!isFirstRender.value) {
      emit('change', value);
@@ -114,6 +116,7 @@ watch(
  },
 );

+/** 将文件转换为 Base64 格式 */
 function getBase64<T extends ArrayBuffer | null | string>(file: File) {
  return new Promise<T>((resolve, reject) => {
    const reader = new FileReader();
@@ -125,6 +128,7 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
  });
 }

+/** 处理图片预览 */
 async function handlePreview(file: UploadFile) {
  if (!file.url && !file.preview) {
    file.preview = await getBase64<string>(file.originFileObj!);
@@ -138,6 +142,7 @@ async function handlePreview(file: UploadFile) {
    );
 }

+/** 处理文件删除 */
 async function handleRemove(file: UploadFile) {
  if (fileList.value) {
    const index = fileList.value.findIndex((item) => item.uid === file.uid);
@@ -151,11 +156,17 @@ async function handleRemove(file: UploadFile) {
  }
 }

+/** 关闭预览弹窗 */
 function handleCancel() {
  previewOpen.value = false;
  previewTitle.value = '';
 }

+/**
+ * 上传前校验
+ * @param file 待上传的文件
+ * @returns 是否允许上传
+ */
 async function beforeUpload(file: File) {
  // 检查文件数量限制
  if (fileList.value!.length >= props.maxNumber) {
@@ -186,7 +197,8 @@ async function beforeUpload(file: File) {
  return true;
 }

-async function customRequest(info: UploadRequestOption<any>) {
+/** 自定义上传请求 */
+async function customRequest(info: UploadRequestOption) {
  let { api } = props;
  if (!api || !isFunction(api)) {
    api = useUpload(props.directory).httpRequest;
@@ -211,7 +223,11 @@ async function customRequest(info: UploadRequestOption<any>) {
  }
 }

-// 处理上传成功
+/**
+ * 处理上传成功
+ * @param res 上传响应结果
+ * @param file 上传的文件
+ */
 function handleUploadSuccess(res: any, file: File) {
  // 删除临时文件
  const index = fileList.value?.findIndex((item) => item.name === file.name);
@@ -243,14 +259,18 @@ function handleUploadSuccess(res: any, file: File) {
  }
 }

-// 处理上传错误
+/** 处理上传错误 */
 function handleUploadError(error: any) {
  console.error('上传错误:', error);
-  message.error('上传错误！！！');
+  message.error($t('ui.upload.uploadError'));
  // 上传失败时减少计数器
  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
 }

+/**
+ * 获取当前文件列表的值
+ * @returns 文件 URL 列表或字符串
+ */
 function getValue() {
  const list = (fileList.value || [])
    .filter((item) => item?.status === UploadResultStatus.DONE)
--- a/apps/web-antd/src/components/upload/input-upload.vue
+++ b/apps/web-antd/src/components/upload/input-upload.vue
@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
 import { computed } from 'vue';

 import { useVModel } from '@vueuse/core';
-import { Col, Input, Row, Textarea } from 'ant-design-vue';
+import { Input, Textarea } from 'ant-design-vue';

 import FileUpload from './file-upload.vue';

@@ -30,6 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
  passive: true,
 });

+/** 处理文件内容返回 */
 function handleReturnText(text: string) {
  modelValue.value = text;
  emits('change', modelValue.value);
@@ -37,6 +38,7 @@ function handleReturnText(text: string) {
  emits('update:modelValue', modelValue.value);
 }

+/** 计算输入框属性 */
 const inputProps = computed(() => {
  return {
    ...props.inputProps,
@@ -44,6 +46,7 @@ const inputProps = computed(() => {
  };
 });

+/** 计算文本域属性 */
 const textareaProps = computed(() => {
  return {
    ...props.textareaProps,
@@ -51,6 +54,7 @@ const textareaProps = computed(() => {
  };
 });

+/** 计算文件上传属性 */
 const fileUploadProps = computed(() => {
  return {
    ...props.fileUploadProps,
@@ -58,17 +62,17 @@ const fileUploadProps = computed(() => {
 });
 </script>
 <template>
-  <Row>
-    <Col :span="18">
-      <Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
-      <Textarea readonly v-else :row="4" v-bind="textareaProps" />
-    </Col>
-    <Col :span="6">
-      <FileUpload
-        class="ml-4"
-        v-bind="fileUploadProps"
-        @return-text="handleReturnText"
-      />
-    </Col>
-  </Row>
+  <div class="w-full">
+    <Input v-if="inputType === 'input'" readonly v-bind="inputProps">
+      <template #suffix>
+        <FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
+      </template>
+    </Input>
+    <div v-else class="relative w-full">
+      <Textarea readonly :rows="4" v-bind="textareaProps" />
+      <div class="absolute bottom-2 right-2">
+        <FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
+      </div>
+    </div>
+  </div>
 </template>
--- a/apps/web-antd/src/components/upload/typing.ts
+++ b/apps/web-antd/src/components/upload/typing.ts
@@ -12,28 +12,21 @@ export enum UploadResultStatus {
 export type UploadListType = 'picture' | 'picture-card' | 'text';

 export interface FileUploadProps {
-  // 根据后缀，或者其他
-  accept?: string[];
+  accept?: string[]; // 根据后缀，或者其他
  api?: (
    file: File,
    onUploadProgress?: AxiosProgressEvent,
-  ) => Promise<AxiosResponse<any>>;
-  // 上传的目录
-  directory?: string;
+  ) => Promise<AxiosResponse>;
+  directory?: string; // 上传的目录
  disabled?: boolean;
  drag?: boolean; // 是否支持拖拽上传
  helpText?: string;
  listType?: UploadListType;
-  // 最大数量的文件，Infinity不限制
-  maxNumber?: number;
+  maxNumber?: number; // 最大数量的文件，Infinity不限制
  modelValue?: string | string[]; // v-model 支持
-  // 文件最大多少MB
-  maxSize?: number;
-  // 是否支持多选
-  multiple?: boolean;
-  // support xxx.xxx.xx
-  resultField?: string;
-  // 是否显示下面的描述
-  showDescription?: boolean;
+  maxSize?: number; // 文件最大多少MB
+  multiple?: boolean; // 是否支持多选
+  resultField?: string; // support xxx.xxx.xx
+  showDescription?: boolean; // 是否显示下面的描述
  value?: string | string[];
 }
--- a/apps/web-antd/src/components/upload/use-upload.ts
+++ b/apps/web-antd/src/components/upload/use-upload.ts
@@ -22,6 +22,14 @@ enum UPLOAD_TYPE {
  SERVER = 'server',
 }

+/**
+ * 上传类型钩子函数
+ * @param acceptRef 接受的文件类型
+ * @param helpTextRef 帮助文本
+ * @param maxNumberRef 最大文件数量
+ * @param maxSizeRef 最大文件大小
+ * @returns 文件类型限制和帮助文本的计算属性
+ */
 export function useUploadType({
  acceptRef,
  helpTextRef,
@@ -78,7 +86,11 @@ export function useUploadType({
  return { getAccept, getStringAccept, getHelpText };
 }

-// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
+/**
+ * 上传钩子函数
+ * @param directory 上传目录
+ * @returns 上传 URL 和自定义上传方法
+ */
 export function useUpload(directory?: string) {
  // 后端上传地址
  const uploadUrl = getUploadUrl();