添加文件上传组件
- 实现SQL文件上传功能 - 支持拖拽上传
This commit is contained in:
Leo
parent
2e3eab5fed
commit
f14e62af66
294
src/components/FileUpload.js
Normal file
294
src/components/FileUpload.js
Normal file
@ -0,0 +1,294 @@
|
|||||||
|
/**
|
||||||
|
* 文件上传组件
|
||||||
|
*/
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Upload,
|
||||||
|
Button,
|
||||||
|
Progress,
|
||||||
|
Alert,
|
||||||
|
Card,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Typography,
|
||||||
|
Space,
|
||||||
|
Divider,
|
||||||
|
Tag,
|
||||||
|
message,
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
UploadOutlined,
|
||||||
|
CheckCircleOutlined,
|
||||||
|
ExclamationCircleOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
CopyOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { apiService } from '../services/api';
|
||||||
|
import {
|
||||||
|
formatFileSize,
|
||||||
|
formatConversionTime,
|
||||||
|
validateSQLFile,
|
||||||
|
downloadFile,
|
||||||
|
copyToClipboard
|
||||||
|
} from '../utils/helpers';
|
||||||
|
|
||||||
|
const { Title, Text, Paragraph } = Typography;
|
||||||
|
const { Dragger } = Upload;
|
||||||
|
|
||||||
|
const FileUpload = ({ onUploadSuccess }) => {
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [uploadProgress, setUploadProgress] = useState(0);
|
||||||
|
const [result, setResult] = useState(null);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
// 处理文件上传
|
||||||
|
const handleUpload = async (file) => {
|
||||||
|
// 验证文件类型
|
||||||
|
if (!validateSQLFile(file)) {
|
||||||
|
message.error('只能上传.sql格式的文件');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证文件大小 (50MB)
|
||||||
|
if (file.size > 50 * 1024 * 1024) {
|
||||||
|
message.error('文件大小不能超过50MB');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
setUploading(true);
|
||||||
|
setUploadProgress(0);
|
||||||
|
setResult(null);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiService.uploadFile(file, (progress) => {
|
||||||
|
setUploadProgress(progress);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data.status === 'success') {
|
||||||
|
setResult(response.data.data);
|
||||||
|
message.success('文件转换成功！');
|
||||||
|
if (onUploadSuccess) {
|
||||||
|
onUploadSuccess(response.data.data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error(response.data.message || '转换失败');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
const errorMsg = err.message || '上传失败，请重试';
|
||||||
|
setError(errorMsg);
|
||||||
|
message.error(errorMsg);
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
setUploadProgress(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false; // 阻止默认上传
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载转换后的文件
|
||||||
|
const handleDownload = async () => {
|
||||||
|
if (!result?.record_id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiService.downloadFile(result.record_id);
|
||||||
|
const blob = new Blob([response.data], { type: 'text/plain' });
|
||||||
|
downloadFile(blob, result.converted_filename);
|
||||||
|
message.success('文件下载成功');
|
||||||
|
} catch (err) {
|
||||||
|
message.error('下载失败: ' + err.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 复制URL到剪贴板
|
||||||
|
const handleCopyUrl = async (url) => {
|
||||||
|
const success = await copyToClipboard(url);
|
||||||
|
if (success) {
|
||||||
|
message.success('URL已复制到剪贴板');
|
||||||
|
} else {
|
||||||
|
message.error('复制失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card title="上传SQL文件进行转换" style={{ marginBottom: 24 }}>
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} lg={12}>
|
||||||
|
<Dragger
|
||||||
|
name="file"
|
||||||
|
accept=".sql"
|
||||||
|
beforeUpload={handleUpload}
|
||||||
|
showUploadList={false}
|
||||||
|
disabled={uploading}
|
||||||
|
style={{ padding: '40px 20px' }}
|
||||||
|
>
|
||||||
|
<p className="ant-upload-drag-icon">
|
||||||
|
<UploadOutlined style={{ fontSize: 48, color: '#1890ff' }} />
|
||||||
|
</p>
|
||||||
|
<p className="ant-upload-text">
|
||||||
|
点击或拖拽SQL文件到此区域上传
|
||||||
|
</p>
|
||||||
|
<p className="ant-upload-hint">
|
||||||
|
支持单个文件上传，文件格式：.sql，最大支持50MB
|
||||||
|
</p>
|
||||||
|
</Dragger>
|
||||||
|
|
||||||
|
{uploading && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<Progress
|
||||||
|
percent={uploadProgress}
|
||||||
|
status="active"
|
||||||
|
strokeColor={{
|
||||||
|
from: '#108ee9',
|
||||||
|
to: '#87d068',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
|
||||||
|
正在上传并转换文件...
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<Alert
|
||||||
|
message="转换失败"
|
||||||
|
description={error}
|
||||||
|
type="error"
|
||||||
|
showIcon
|
||||||
|
style={{ marginTop: 16 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} lg={12}>
|
||||||
|
<div style={{ padding: '20px 0' }}>
|
||||||
|
<Title level={4}>转换说明</Title>
|
||||||
|
<Paragraph>
|
||||||
|
本工具支持将 <Tag color="blue">SQL Server 2008</Tag> 的SQL语法转换为 <Tag color="green">MySQL 8</Tag> 兼容语法。
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<Title level={5}>主要转换内容：</Title>
|
||||||
|
<ul style={{ paddingLeft: 20 }}>
|
||||||
|
<li>数据类型转换（nvarchar → VARCHAR）</li>
|
||||||
|
<li>标识符转换（[schema].[table] → `table`）</li>
|
||||||
|
<li>自增长字段（IDENTITY → AUTO_INCREMENT）</li>
|
||||||
|
<li>函数转换（GETDATE() → NOW()）</li>
|
||||||
|
<li>事务语法（BEGIN TRANSACTION → START TRANSACTION）</li>
|
||||||
|
<li>移除SQL Server特定语法</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{result && (
|
||||||
|
<div style={{ marginTop: 24 }}>
|
||||||
|
<Divider />
|
||||||
|
<Alert
|
||||||
|
message="转换成功"
|
||||||
|
type="success"
|
||||||
|
showIcon
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
icon={<CheckCircleOutlined />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Card
|
||||||
|
title="转换结果"
|
||||||
|
size="small"
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<DownloadOutlined />}
|
||||||
|
onClick={handleDownload}
|
||||||
|
>
|
||||||
|
下载文件
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Row gutter={[16, 16]}>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Text strong>原始文件：</Text>
|
||||||
|
<br />
|
||||||
|
<Text>{result.original_filename}</Text>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Text strong>转换后文件：</Text>
|
||||||
|
<br />
|
||||||
|
<Text>{result.converted_filename}</Text>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Text strong>文件大小：</Text>
|
||||||
|
<br />
|
||||||
|
<Text>{formatFileSize(result.file_size)}</Text>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} sm={12}>
|
||||||
|
<Text strong>转换耗时：</Text>
|
||||||
|
<br />
|
||||||
|
<Text>{formatConversionTime(result.conversion_time)}</Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{result.converted_url && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<Text strong>下载链接：</Text>
|
||||||
|
<br />
|
||||||
|
<Space>
|
||||||
|
<Text code copyable style={{ maxWidth: 400 }}>
|
||||||
|
{result.converted_url}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
onClick={() => handleCopyUrl(result.converted_url)}
|
||||||
|
>
|
||||||
|
复制
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result.warnings && result.warnings.length > 0 && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<Alert
|
||||||
|
message="转换警告"
|
||||||
|
description={
|
||||||
|
<ul style={{ margin: 0, paddingLeft: 20 }}>
|
||||||
|
{result.warnings.map((warning, index) => (
|
||||||
|
<li key={index}>{warning}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
type="warning"
|
||||||
|
showIcon
|
||||||
|
icon={<ExclamationCircleOutlined />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{result.validation_issues && result.validation_issues.length > 0 && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<Alert
|
||||||
|
message="验证问题"
|
||||||
|
description={
|
||||||
|
<ul style={{ margin: 0, paddingLeft: 20 }}>
|
||||||
|
{result.validation_issues.map((issue, index) => (
|
||||||
|
<li key={index}>{issue}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
type="info"
|
||||||
|
showIcon
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FileUpload;
|
||||||
Loading…
Reference in New Issue
Block a user