Browse Source

♻️ refactor(admin): 优化MinioUploader组件类型定义和文件处理

- 移除自定义UploadFileItem接口,统一使用antd的UploadFile类型
- 修复文件上传时的类型转换问题,正确使用originFileObj属性
- 调整上传状态判断,将'success'改为'done'以匹配antd标准状态
- 更新文件名称显示方式,直接使用item.name而非item.file.name
- 添加Button组件导入,完善组件依赖
yourname 8 months ago
parent
commit
b4f71b8a1a
1 changed files with 7 additions and 16 deletions
  1. 7 16
      src/client/admin/components/MinioUploader.tsx

+ 7 - 16
src/client/admin/components/MinioUploader.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Upload, Progress, message, Tag, Space, Typography } from 'antd';
+import { Upload, Progress, message, Tag, Space, Typography, Button } from 'antd';
 import { UploadOutlined, CloseOutlined, CheckCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { App } from 'antd';
 import type { UploadFile } from 'antd';
@@ -24,15 +24,6 @@ interface MinioUploaderProps {
   tipText?: string;
 }
 
-interface UploadFileItem {
-  uid: string;
-  file: File;
-  status: 'ready' | 'uploading' | 'success' | 'error';
-  progress: number;
-  message?: string;
-  fileKey?: string;
-  fileUrl?: string;
-}
 
 const MinioUploader: React.FC<MinioUploaderProps> = ({
   uploadPath = '/',
@@ -45,7 +36,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
   tipText = '支持单文件或多文件上传,单个文件大小不超过500MB'
 }) => {
   const { message: antdMessage } = App.useApp();
-  const [fileList, setFileList] = useState<UploadFileItem[]>([]);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [uploadingFiles, setUploadingFiles] = useState<Set<string>>(new Set());
 
   // 处理上传进度
@@ -147,7 +138,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       // 调用minio上传方法
       const result = await uploadMinIOWithPolicy(
         uploadPath,
-        file,
+        file.originFileObj as File,
         file.name,
         {
           onProgress: (event) => handleProgress(uid, event),
@@ -155,10 +146,10 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         }
       );
       
-      handleComplete(uid, result, file);
+      handleComplete(uid, result, file.originFileObj as File);
       onSuccess();
     } catch (error) {
-      handleError(uid, error instanceof Error ? error : new Error('未知错误'), file);
+      handleError(uid, error instanceof Error ? error : new Error('未知错误'), file.originFileObj as File);
       onError(error instanceof Error ? error : new Error('未知错误'));
     }
   };
@@ -188,7 +179,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
             <span>{item.progress}%</span>
           </Space>
         );
-      case 'success':
+      case 'done':
         return (
           <Space>
             <CheckCircleOutlined style={{ color: '#52c41a' }} size={12} />
@@ -235,7 +226,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
               <div className="flex-1 min-w-0">
                 <div className="flex justify-between items-center mb-1">
                   <Typography.Text ellipsis className="max-w-xs">
-                    {item.file.name}
+                    {item.name}
                   </Typography.Text>
                   <div className="flex items-center space-x-2">
                     {renderUploadStatus(item)}