From b01ce4d2c962dba130f0fa13b3a9a72d64f85dc4 Mon Sep 17 00:00:00 2001 From: callmeyan Date: Fri, 1 Aug 2025 18:13:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(file-upload):=20=E4=BC=98=E5=8C=96=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=BC=A0=E9=80=BB=E8=BE=91=E5=B9=B6=E9=98=B2?= =?UTF-8?q?=E6=AD=A2=E9=87=8D=E5=A4=8D=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新服务器端文件上传处理逻辑,避免重复发送事件 - 客户端优化文件上传组件,防止重复添加文件 - 调整文件列表更新策略,支持文件更新 - 优化上传区域样式,提升用户体验 --- server.js | 6 +++--- src/app/globals.css | 2 +- src/components/FileUpload.tsx | 6 +++++- src/hooks/useFiles.ts | 15 ++++++++++++++- src/hooks/useUpload.ts | 5 ++--- 5 files changed, 25 insertions(+), 9 deletions(-) diff --git a/server.js b/server.js index fae0b43..3611d36 100644 --- a/server.js +++ b/server.js @@ -85,19 +85,19 @@ io.on('connection', (socket) => { io.emit('user:count', userCount); console.log(`User connected. Total users: ${userCount}`); - // Handle file upload events + // Handle file upload events (from client) socket.on('file:upload', (data) => { socket.broadcast.emit('file:uploaded', data); console.log('File uploaded:', data.filename); }); - // Handle file delete events + // Handle file delete events (from client) socket.on('file:delete', (data) => { socket.broadcast.emit('file:deleted', data); console.log('File deleted:', data.id); }); - // Handle file visibility toggle events + // Handle file visibility toggle events (from client) socket.on('file:toggle:visibility', (data) => { socket.broadcast.emit('file:visibility:changed', data); console.log('File visibility changed:', data.id, data.isVisible); diff --git a/src/app/globals.css b/src/app/globals.css index 47d2705..d431b58 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -64,7 +64,7 @@ } .upload-area { - @apply flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 text-center transition-colors hover:border-muted-foreground/50 hover:bg-muted/75; + @apply flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 text-center transition-colors hover:border-primary/80 hover:bg-muted/75; } .upload-area.drag-over { diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index db617f1..6020dcc 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -22,6 +22,8 @@ export const FileUpload: React.FC = ({ onUploadComplete }) => { const handleFileSelect = useCallback(async (file: File) => { const response = await uploadFile(file); if (response.success) { + // Don't call onUploadComplete here as the socket event will handle the update + // This prevents duplicate files from being added onUploadComplete?.(); } }, [uploadFile, onUploadComplete]); @@ -120,7 +122,9 @@ export const FileUpload: React.FC = ({ onUploadComplete }) => { )} - +
+ +

{isAuthenticated ? '拖拽文件到此处上传' : '需要登录后才能上传文件'} diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts index c74665c..d937edf 100644 --- a/src/hooks/useFiles.ts +++ b/src/hooks/useFiles.ts @@ -109,7 +109,20 @@ export const useFiles = (initialParams?: FileQueryParams): UseFilesReturn => { if (!socket) return; const handleFileUploaded = (newFile: File) => { - setFiles(prev => [newFile, ...prev]); + setFiles(prev => { + // Check if file already exists by ID + const existingFileIndex = prev.findIndex(file => file.id === newFile.id); + + if (existingFileIndex >= 0) { + // File exists, replace it with the new one (in case of updates) + const updatedFiles = [...prev]; + updatedFiles[existingFileIndex] = newFile; + return updatedFiles; + } else { + // File doesn't exist, add it to the beginning + return [newFile, ...prev]; + } + }); }; const handleFileDeleted = (data: { id: number }) => { diff --git a/src/hooks/useUpload.ts b/src/hooks/useUpload.ts index b6de81c..d6c3a90 100644 --- a/src/hooks/useUpload.ts +++ b/src/hooks/useUpload.ts @@ -58,9 +58,8 @@ export const useUpload = (): UseUploadReturn => { const response = await uploadPromise; - if (response.success && socket) { - socket.emit('file:upload', response.file); - } + // The socket server will emit the file:uploaded event via HTTP request + // No need to emit it here to avoid duplicates return response; } catch (err) {