Browse Source

优化图片上传的逻辑

黎海 2 months ago
parent
commit
d00161b8e1
1 changed files with 50 additions and 6 deletions
  1. 50 6
      src/pages/projectDetail/projectDetail.js

+ 50 - 6
src/pages/projectDetail/projectDetail.js

@@ -79,6 +79,7 @@ const ProjectDetail = () => {
79 79
   const [drawingSegmentId, setDrawingSegmentId] = useState(null);
80 80
   const [totalDrawableSegments, setTotalDrawableSegments] = useState(0);
81 81
   const [completedDrawings, setCompletedDrawings] = useState(0);
82
+  const [isUploading, setIsUploading] = useState(false);
82 83
 
83 84
   const fileInputRef = useRef(null);
84 85
 
@@ -371,8 +372,15 @@ const ProjectDetail = () => {
371 372
       return;
372 373
     }
373 374
 
375
+    // 获取当前处理的分镜
376
+    const currentSegment = segments.find(s => s.id === uploadSegmentId);
377
+    if (!currentSegment) {
378
+      toast.error('分镜不存在');
379
+      return;
380
+    }
381
+
374 382
     try {
375
-      setLoading(true);
383
+      setIsUploading(true);
376 384
 
377 385
       // 如果是图片类型,先上传到Coze获取链接
378 386
       if (uploadType === 'image') {
@@ -389,6 +397,15 @@ const ProjectDetail = () => {
389 397
           draw_status: 2 // 设置为已完成状态
390 398
         });
391 399
 
400
+        // 直接更新本地状态,不刷新整个页面
401
+        setSegments(prevSegments =>
402
+          prevSegments.map(seg =>
403
+            seg.id === uploadSegmentId
404
+              ? { ...seg, image_path: imageUrl, draw_status: 2 }
405
+              : seg
406
+          )
407
+        );
408
+
392 409
         toast.success('图片上传成功');
393 410
       } else {
394 411
         // 其他类型文件(音频、视频)的处理逻辑
@@ -407,16 +424,31 @@ const ProjectDetail = () => {
407 424
         }
408 425
 
409 426
         await bookInfoService.updateBookInfo(uploadSegmentId, updateData);
427
+
428
+        // 直接更新本地状态,不刷新整个页面
429
+        setSegments(prevSegments =>
430
+          prevSegments.map(seg =>
431
+            seg.id === uploadSegmentId
432
+              ? { ...seg, ...updateData }
433
+              : seg
434
+          )
435
+        );
436
+
410 437
         toast.success('文件上传成功');
411 438
       }
412 439
 
440
+      // 关闭上传对话框
413 441
       setShowUploadModal(false);
414
-      await loadProjectDetail();
442
+      // 清空选择的文件
443
+      setSelectedFile(null);
444
+      if (fileInputRef.current) {
445
+        fileInputRef.current.value = '';
446
+      }
415 447
     } catch (error) {
416 448
       console.error('文件上传失败:', error);
417 449
       toast.error(`文件上传失败: ${error.message}`);
418 450
     } finally {
419
-      setLoading(false);
451
+      setIsUploading(false);
420 452
     }
421 453
   };
422 454
 
@@ -2035,7 +2067,7 @@ const ProjectDetail = () => {
2035 2067
   };
2036 2068
 
2037 2069
   if (loading && !silentLoading) {
2038
-    return <div className="text-center p-5">加载中...</div>;
2070
+    return null; // 移除加载中的显示
2039 2071
   }
2040 2072
 
2041 2073
   return (
@@ -2781,9 +2813,21 @@ const ProjectDetail = () => {
2781 2813
           <Button
2782 2814
             variant="primary"
2783 2815
             onClick={handleFileUpload}
2784
-            disabled={loading || !selectedFile}
2816
+            disabled={isUploading || !selectedFile}
2785 2817
           >
2786
-            {loading ? '上传中...' : '上传'}
2818
+            {isUploading ? (
2819
+              <>
2820
+                <Spinner
2821
+                  as="span"
2822
+                  animation="border"
2823
+                  size="sm"
2824
+                  role="status"
2825
+                  aria-hidden="true"
2826
+                  className="me-1"
2827
+                />
2828
+                上传中...
2829
+              </>
2830
+            ) : '上传'}
2787 2831
           </Button>
2788 2832
         </Modal.Footer>
2789 2833
       </Modal>