399 lines
13 KiB
JavaScript
399 lines
13 KiB
JavaScript
|
import React, { useState, useEffect } from 'react'; // 补充导入useEffect
|
|||
|
|
import axios from '../../services/axios';
|
|||
|
|
import { toast } from 'react-toastify';
|
|||
|
|
import { ProgressBar, Card, Button, Form } from 'react-bootstrap';
|
|||
|
|
import { adminAPI } from '../../services/api';
|
|||
|
|
|
|||
|
|
const FileUpload = () => {
|
|||
|
|
const [selectedFiles, setSelectedFiles] = useState([]);
|
|||
|
|
const [descriptions, setDescriptions] = useState({});
|
|||
|
|
const [uploading, setUploading] = useState(false);
|
|||
|
|
const [progress, setProgress] = useState({});
|
|||
|
|
const [filePreviews, setFilePreviews] = useState({});
|
|||
|
|
const [uploadMode, setUploadMode] = useState('single'); // 'single' or 'batch'
|
|||
|
|
const [categories, setCategories] = useState([]);
|
|||
|
|
const [selectedCategory, setSelectedCategory] = useState('');
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const fetchCategories = async () => {
|
|||
|
|
try {
|
|||
|
|
// 添加hierarchical=true参数，获取层次化的分类数据
|
|||
|
|
const res = await adminAPI.getCategories({hierarchical: true});
|
|||
|
|
// 检查返回的数据结构
|
|||
|
|
console.log('API返回的分类数据:', res.data);
|
|||
|
|
// 确保categories是一个数组
|
|||
|
|
let categoriesData = [];
|
|||
|
|
|
|||
|
|
if (res.data && res.data.categories) {
|
|||
|
|
// 如果API返回的是 {categories: [...]} 格式
|
|||
|
|
categoriesData = res.data.categories || [];
|
|||
|
|
} else if (Array.isArray(res.data)) {
|
|||
|
|
// 如果API直接返回数组
|
|||
|
|
categoriesData = res.data;
|
|||
|
|
} else {
|
|||
|
|
console.error('API返回的分类数据格式不正确:', res.data);
|
|||
|
|
categoriesData = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 递归处理分类数据，确保每个分类都有必要的字段
|
|||
|
|
const processCategories = (categories, level = 0) => {
|
|||
|
|
return categories.map(cat => ({
|
|||
|
|
id: cat.id || cat._id || cat.category_id || '',
|
|||
|
|
name: cat.name || cat.category_name || '未命名分类',
|
|||
|
|
level: cat.level || level,
|
|||
|
|
parent_id: cat.parent_id || null,
|
|||
|
|
children: cat.children ? processCategories(cat.children, level + 1) : []
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理分类数据，构建扁平化的分类列表（用于下拉选择）
|
|||
|
|
const flattenCategories = (categories, result = []) => {
|
|||
|
|
categories.forEach(category => {
|
|||
|
|
result.push({
|
|||
|
|
id: category.id,
|
|||
|
|
name: category.name,
|
|||
|
|
level: category.level,
|
|||
|
|
parent_id: category.parent_id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (category.children && category.children.length > 0) {
|
|||
|
|
flattenCategories(category.children, result);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return result;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const processedCategories = processCategories(categoriesData);
|
|||
|
|
const flattenedCategories = flattenCategories(processedCategories);
|
|||
|
|
|
|||
|
|
setCategories(flattenedCategories);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('获取分类列表失败');
|
|||
|
|
console.error(err);
|
|||
|
|
setCategories([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
fetchCategories();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleFileChange = (e) => {
|
|||
|
|
const files = Array.from(e.target.files);
|
|||
|
|
if (uploadMode === 'single') {
|
|||
|
|
if (files.length > 0) {
|
|||
|
|
const file = files[0];
|
|||
|
|
setSelectedFiles([file]);
|
|||
|
|
|
|||
|
|
// 生成文件预览（仅支持图片）
|
|||
|
|
if (file.type.startsWith('image/')) {
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = (event) => {
|
|||
|
|
setFilePreviews({ [file.name]: event.target.result });
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
} else {
|
|||
|
|
setFilePreviews({});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 批量上传模式
|
|||
|
|
setSelectedFiles(files);
|
|||
|
|
|
|||
|
|
files.forEach(file => {
|
|||
|
|
if (file.type.startsWith('image/')) {
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = (event) => {
|
|||
|
|
setFilePreviews(prev => ({ ...prev, [file.name]: event.target.result }));
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpload = async (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
if (selectedFiles.length === 0) {
|
|||
|
|
toast.warning('请选择要上传的文件');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!selectedCategory) {
|
|||
|
|
toast.warning('请选择文件分类');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setUploading(true);
|
|||
|
|
|
|||
|
|
if (uploadMode === 'single') {
|
|||
|
|
// 单文件上传
|
|||
|
|
const file = selectedFiles[0];
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file);
|
|||
|
|
formData.append('description', descriptions[file.name] || '');
|
|||
|
|
formData.append('category_id', selectedCategory);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setProgress({ [file.name]: 0 });
|
|||
|
|
|
|||
|
|
await adminAPI.uploadFile(formData, (progressEvent) => {
|
|||
|
|
const percent = Math.round(
|
|||
|
|
(progressEvent.loaded / progressEvent.total) * 100
|
|||
|
|
);
|
|||
|
|
setProgress({ [file.name]: percent });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
toast.success('文件上传成功！');
|
|||
|
|
resetForm();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error(`文件上传失败: ${err.response?.data?.message || '请重试'}`);
|
|||
|
|
console.error(err);
|
|||
|
|
} finally {
|
|||
|
|
setUploading(false);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 批量上传（修复逻辑结构）
|
|||
|
|
const CONCURRENT_LIMIT = 3;
|
|||
|
|
const uploadQueue = [...selectedFiles];
|
|||
|
|
const results = [];
|
|||
|
|
|
|||
|
|
// 并发上传工作函数
|
|||
|
|
const worker = async () => {
|
|||
|
|
while (uploadQueue.length > 0) {
|
|||
|
|
const file = uploadQueue.shift();
|
|||
|
|
try {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', file);
|
|||
|
|
formData.append('description', descriptions[file.name] || '');
|
|||
|
|
formData.append('category_id', selectedCategory);
|
|||
|
|
|
|||
|
|
await adminAPI.uploadFile(formData, (progressEvent) => {
|
|||
|
|
const percent = Math.round(
|
|||
|
|
(progressEvent.loaded / progressEvent.total) * 100
|
|||
|
|
);
|
|||
|
|
setProgress(prev => ({ ...prev, [file.name]: percent }));
|
|||
|
|
});
|
|||
|
|
results.push({ file: file.name, status: 'success' });
|
|||
|
|
} catch (error) {
|
|||
|
|
results.push({ file: file.name, status: 'error', error: error.message });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 启动并发上传
|
|||
|
|
const workers = Array(CONCURRENT_LIMIT).fill(null).map(worker);
|
|||
|
|
await Promise.allSettled(workers);
|
|||
|
|
|
|||
|
|
// 统计结果
|
|||
|
|
const successful = results.filter(r => r.status === 'success').length;
|
|||
|
|
const failed = results.filter(r => r.status === 'error').length;
|
|||
|
|
|
|||
|
|
if (failed === 0) {
|
|||
|
|
toast.success(`批量上传完成！成功上传 ${successful} 个文件`);
|
|||
|
|
} else {
|
|||
|
|
toast.warning(`批量上传完成！成功 ${successful} 个，失败 ${failed} 个`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resetForm();
|
|||
|
|
setUploading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const resetForm = () => {
|
|||
|
|
setSelectedFiles([]);
|
|||
|
|
setDescriptions({});
|
|||
|
|
setProgress({});
|
|||
|
|
setFilePreviews({});
|
|||
|
|
setSelectedCategory('');
|
|||
|
|
document.getElementById('fileInput').value = '';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDescriptionChange = (filename, value) => {
|
|||
|
|
setDescriptions(prev => ({ ...prev, [filename]: value }));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeFile = (filename) => {
|
|||
|
|
setSelectedFiles(prev => prev.filter(file => file.name !== filename));
|
|||
|
|
setDescriptions(prev => {
|
|||
|
|
const newDescriptions = { ...prev };
|
|||
|
|
delete newDescriptions[filename];
|
|||
|
|
return newDescriptions;
|
|||
|
|
});
|
|||
|
|
setProgress(prev => {
|
|||
|
|
const newProgress = { ...prev };
|
|||
|
|
delete newProgress[filename];
|
|||
|
|
return newProgress;
|
|||
|
|
});
|
|||
|
|
setFilePreviews(prev => {
|
|||
|
|
const newPreviews = { ...prev };
|
|||
|
|
delete newPreviews[filename];
|
|||
|
|
return newPreviews;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ paddingBottom: '60px' }}>
|
|||
|
|
<h1 className="mb-4">上传文件</h1>
|
|||
|
|
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<Button
|
|||
|
|
variant={uploadMode === 'single' ? 'primary' : 'outline-primary'}
|
|||
|
|
onClick={() => setUploadMode('single')}
|
|||
|
|
className="me-2"
|
|||
|
|
>
|
|||
|
|
单文件上传
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant={uploadMode === 'batch' ? 'primary' : 'outline-primary'}
|
|||
|
|
onClick={() => setUploadMode('batch')}
|
|||
|
|
>
|
|||
|
|
批量上传
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<Card.Body>
|
|||
|
|
<Form onSubmit={handleUpload}>
|
|||
|
|
<Form.Group className="mb-3">
|
|||
|
|
<Form.Label>
|
|||
|
|
{uploadMode === 'single' ? '选择文件' : '选择多个文件'}
|
|||
|
|
</Form.Label>
|
|||
|
|
<Form.Control
|
|||
|
|
type="file"
|
|||
|
|
id="fileInput"
|
|||
|
|
onChange={handleFileChange}
|
|||
|
|
disabled={uploading}
|
|||
|
|
multiple={uploadMode === 'batch'}
|
|||
|
|
/>
|
|||
|
|
</Form.Group>
|
|||
|
|
|
|||
|
|
<Form.Group className="mb-3">
|
|||
|
|
<Form.Label>选择分类 <span className="text-danger">*</span></Form.Label>
|
|||
|
|
<Form.Select
|
|||
|
|
value={selectedCategory}
|
|||
|
|
onChange={(e) => setSelectedCategory(e.target.value)}
|
|||
|
|
disabled={uploading}
|
|||
|
|
required
|
|||
|
|
>
|
|||
|
|
<option value="">请选择分类</option>
|
|||
|
|
{categories.map(cat => (
|
|||
|
|
<option key={cat.id} value={cat.id}>
|
|||
|
|
{/* 使用缩进表示层级关系 */}
|
|||
|
|
{cat.level > 0 ? ' '.repeat(cat.level) + '└ ' : ''}{cat.name}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</Form.Select>
|
|||
|
|
<Form.Text className="text-muted">
|
|||
|
|
必须选择一个文件分类（包括子分类）
|
|||
|
|
</Form.Text>
|
|||
|
|
</Form.Group>
|
|||
|
|
|
|||
|
|
{selectedFiles.length > 0 && (
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<h5>已选择的文件 ({selectedFiles.length}个):</h5>
|
|||
|
|
{selectedFiles.map((file, index) => (
|
|||
|
|
<Card key={index} className="mb-2">
|
|||
|
|
<Card.Body className="p-3">
|
|||
|
|
<div className="d-flex justify-content-between align-items-start">
|
|||
|
|
<div className="flex-grow-1">
|
|||
|
|
<div className="d-flex align-items-center">
|
|||
|
|
{filePreviews[file.name] && (
|
|||
|
|
<img
|
|||
|
|
src={filePreviews[file.name]}
|
|||
|
|
alt="预览"
|
|||
|
|
style={{ width: '50px', height: '50px', objectFit: 'cover', marginRight: '10px' }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<strong>{file.name}</strong>
|
|||
|
|
<div className="text-muted small">
|
|||
|
|
{(file.size / 1024 / 1024).toFixed(2)} MB
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Form.Group className="mt-2">
|
|||
|
|
<Form.Control
|
|||
|
|
type="text"
|
|||
|
|
placeholder="文件描述（可选）"
|
|||
|
|
value={descriptions[file.name] || ''}
|
|||
|
|
onChange={(e) => handleDescriptionChange(file.name, e.target.value)}
|
|||
|
|
disabled={uploading}
|
|||
|
|
size="sm"
|
|||
|
|
/>
|
|||
|
|
</Form.Group>
|
|||
|
|
|
|||
|
|
{progress[file.name] !== undefined && (
|
|||
|
|
<ProgressBar
|
|||
|
|
now={progress[file.name]}
|
|||
|
|
label={`${progress[file.name]}%`}
|
|||
|
|
className="mt-2"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
variant="outline-danger"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => removeFile(file.name)}
|
|||
|
|
disabled={uploading}
|
|||
|
|
className="ms-2"
|
|||
|
|
>
|
|||
|
|
移除
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</Card.Body>
|
|||
|
|
</Card>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Form>
|
|||
|
|
</Card.Body>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 优化的底部上传按钮区域 */}
|
|||
|
|
<div style={{
|
|||
|
|
position: 'fixed',
|
|||
|
|
bottom: '20px',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translateX(-50%)',
|
|||
|
|
backgroundColor: 'white',
|
|||
|
|
border: '1px solid #dee2e6',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
padding: '12px 20px',
|
|||
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|||
|
|
zIndex: 1000,
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: '10px',
|
|||
|
|
width: 'auto',
|
|||
|
|
minWidth: '200px',
|
|||
|
|
maxWidth: '90%'
|
|||
|
|
}}>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
variant="primary"
|
|||
|
|
onClick={handleUpload}
|
|||
|
|
disabled={selectedFiles.length === 0 || uploading}
|
|||
|
|
size="md"
|
|||
|
|
>
|
|||
|
|
{uploading ? '上传中...' :
|
|||
|
|
uploadMode === 'single' ? '上传文件' : `批量上传 (${selectedFiles.length}个文件)`}
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
{uploading && (
|
|||
|
|
<Button
|
|||
|
|
variant="outline-secondary"
|
|||
|
|
onClick={resetForm}
|
|||
|
|
size="md"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default FileUpload;
|