Просмотр исходного кода

✨ feat(upload): 添加rc-upload依赖并优化上传组件类型定义

- 添加rc-upload@4.9.2依赖以增强文件上传功能
- 引入RcFile和UploadRequestOption类型定义,优化类型安全
- 调整customRequest方法参数类型,使用rc-upload提供的UploadRequestOption接口
- 修复文件对象属性访问方式,确保类型兼容性

♻️ refactor(upload): 优化MinioUploader组件文件处理逻辑

- 将file对象转换为RcFile类型,统一文件属性访问方式
- 修复lastModifiedDate属性赋值,使用new Date()确保类型正确
- 优化onSuccess和onError调用方式,添加可选链操作符增强代码健壮性
- 调整uploadMinIOWithPolicy调用参数,使用options.file确保文件对象正确传递
yourname 8 месяцев назад
Родитель
Сommit
a916109736
3 измененных файлов с 21 добавлено и 19 удалено
  1. 1 0
      package.json
  2. 3 0
      pnpm-lock.yaml
  3. 17 19
      src/client/admin/components/MinioUploader.tsx

+ 1 - 0
package.json

@@ -34,6 +34,7 @@
     "minio": "^8.0.5",
     "mysql2": "^3.14.1",
     "node-fetch": "^3.3.2",
+    "rc-upload": "^4.9.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.57.0",

+ 3 - 0
pnpm-lock.yaml

@@ -86,6 +86,9 @@ importers:
       node-fetch:
         specifier: ^3.3.2
         version: 3.3.2
+      rc-upload:
+        specifier: ^4.9.2
+        version: 4.9.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0

+ 17 - 19
src/client/admin/components/MinioUploader.tsx

@@ -2,8 +2,10 @@ import React, { useState, useCallback } from 'react';
 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 , UploadProps} from 'antd';
+import type { UploadFile, UploadProps } from 'antd';
+import type { RcFile } from 'rc-upload/lib/interface';
 import type { UploadFileStatus } from 'antd/es/upload/interface';
+import type { UploadRequestOption } from 'rc-upload/lib/interface';
 import { uploadMinIOWithPolicy, MinioProgressEvent } from '@/client/utils/minio';
 
 interface MinioUploaderProps {
@@ -111,25 +113,21 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
   }, [antdMessage, onUploadError]);
 
   // 自定义上传逻辑
-  const customRequest = async (options: {
-    file: UploadFile,
-    onSuccess: () => void,
-    onError: (error: Error) => void
-  }) => {
+  const customRequest = async (options: UploadRequestOption) => {
     const { file, onSuccess, onError } = options;
-    const uid = file.uid;
+    const rcFile = file as RcFile;
+    const uid = rcFile.uid;
     
     // 添加到文件列表
     setFileList(prev => [
       ...prev.filter(item => item.uid !== uid),
       {
         uid,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        lastModified: file.lastModified,
-        lastModifiedDate: file.lastModifiedDate,
-        originFileObj: file.originFileObj,
+        name: rcFile.name,
+        size: rcFile.size,
+        type: rcFile.type,
+        lastModified: rcFile.lastModified,
+        lastModifiedDate: new Date(rcFile.lastModified),
         status: 'uploading' as UploadFileStatus,
         percent: 0,
       }
@@ -142,19 +140,19 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       // 调用minio上传方法
       const result = await uploadMinIOWithPolicy(
         uploadPath,
-        file.originFileObj as File,
-        file.name,
+        options.file as unknown as File,
+        rcFile.name,
         {
           onProgress: (event) => handleProgress(uid, event),
           signal: new AbortController().signal
         }
       );
       
-      handleComplete(uid, result, file.originFileObj as File);
-      onSuccess();
+      handleComplete(uid, result, rcFile as unknown as File);
+      onSuccess?.({}, rcFile);
     } catch (error) {
-      handleError(uid, error instanceof Error ? error : new Error('未知错误'), file.originFileObj as File);
-      onError(error instanceof Error ? error : new Error('未知错误'));
+      handleError(uid, error instanceof Error ? error : new Error('未知错误'), rcFile as unknown as File);
+      onError?.(error instanceof Error ? error : new Error('未知错误'));
     }
   };