|
|
@@ -2,7 +2,8 @@ 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 } from 'antd';
|
|
|
+import type { UploadFile , UploadProps} from 'antd';
|
|
|
+import type { UploadFileStatus } from 'antd/es/upload/interface';
|
|
|
import { uploadMinIOWithPolicy, MinioProgressEvent } from '@/client/utils/minio';
|
|
|
|
|
|
interface MinioUploaderProps {
|
|
|
@@ -46,9 +47,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
if (item.uid === uid) {
|
|
|
return {
|
|
|
...item,
|
|
|
- status: event.stage === 'error' ? 'error' : 'uploading',
|
|
|
- progress: event.progress,
|
|
|
- message: event.message
|
|
|
+ status: event.stage === 'error' ? ('error' as UploadFileStatus) : ('uploading' as UploadFileStatus),
|
|
|
+ percent: event.progress,
|
|
|
+ error: event.stage === 'error' ? event.message : undefined
|
|
|
};
|
|
|
}
|
|
|
return item;
|
|
|
@@ -63,11 +64,10 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
if (item.uid === uid) {
|
|
|
return {
|
|
|
...item,
|
|
|
- status: 'success',
|
|
|
- progress: 100,
|
|
|
- fileKey: result.fileKey,
|
|
|
- fileUrl: result.fileUrl,
|
|
|
- message: '上传成功'
|
|
|
+ status: 'success' as UploadFileStatus,
|
|
|
+ percent: 100,
|
|
|
+ response: { fileKey: result.fileKey },
|
|
|
+ url: result.fileUrl,
|
|
|
};
|
|
|
}
|
|
|
return item;
|
|
|
@@ -91,9 +91,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
if (item.uid === uid) {
|
|
|
return {
|
|
|
...item,
|
|
|
- status: 'error',
|
|
|
- progress: 0,
|
|
|
- message: error.message || '上传失败'
|
|
|
+ status: 'error' as UploadFileStatus,
|
|
|
+ percent: 0,
|
|
|
+ error: error.message || '上传失败'
|
|
|
};
|
|
|
}
|
|
|
return item;
|
|
|
@@ -124,10 +124,14 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
...prev.filter(item => item.uid !== uid),
|
|
|
{
|
|
|
uid,
|
|
|
- file,
|
|
|
- status: 'uploading',
|
|
|
- progress: 0,
|
|
|
- message: '准备上传...'
|
|
|
+ name: file.name,
|
|
|
+ size: file.size,
|
|
|
+ type: file.type,
|
|
|
+ lastModified: file.lastModified,
|
|
|
+ lastModifiedDate: file.lastModifiedDate,
|
|
|
+ originFileObj: file.originFileObj,
|
|
|
+ status: 'uploading' as UploadFileStatus,
|
|
|
+ percent: 0,
|
|
|
}
|
|
|
]);
|
|
|
|
|
|
@@ -176,7 +180,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
return (
|
|
|
<Space>
|
|
|
<SyncOutlined spin size={12} />
|
|
|
- <span>{item.progress}%</span>
|
|
|
+ <span>{item.percent}%</span>
|
|
|
</Space>
|
|
|
);
|
|
|
case 'done':
|
|
|
@@ -190,7 +194,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
return (
|
|
|
<Space>
|
|
|
<CloseOutlined style={{ color: '#ff4d4f' }} size={12} />
|
|
|
- <Tag color="error">{item.message || '上传失败'}</Tag>
|
|
|
+ <Tag color="error">{item.error || '上传失败'}</Tag>
|
|
|
</Space>
|
|
|
);
|
|
|
default:
|
|
|
@@ -241,9 +245,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
|
|
|
</div>
|
|
|
{item.status === 'uploading' && (
|
|
|
<Progress
|
|
|
- percent={item.progress}
|
|
|
+ percent={item.percent}
|
|
|
size="small"
|
|
|
- status={item.progress === 100 ? 'success' : undefined}
|
|
|
+ status={item.percent === 100 ? 'success' : undefined}
|
|
|
/>
|
|
|
)}
|
|
|
</div>
|