优化文件上传进度条显示

app/routes/files.upload.tsx

@@ -946,20 +946,22 @@ export default function FilesUpload() {
       
       const startTime = Date.now();
       let lastUploadedSize = 0;
+      let lastUpdateTime = startTime;
       
       uploadProgressIntervalRef.current = setInterval(() => {
         const currentTime = Date.now();
-        const timeElapsed = (currentTime - startTime) / 1000; // 转换为秒
-        const currentSpeed = (uploadedSize - lastUploadedSize) / timeElapsed; // 字节/秒
+        const timeElapsed = (currentTime - lastUpdateTime) / 1000; // 使用最近一次更新的时间间隔
+        const currentSpeed = timeElapsed > 0 ? (uploadedSize - lastUploadedSize) / timeElapsed : 0; // 字节/秒
         lastUploadedSize = uploadedSize;
+        lastUpdateTime = currentTime;
         
         // 更新上传速度显示
         setUploadSpeed(`${formatFileSize(currentSpeed)}/s`);
         
-        // 更新进度
-        const progress = (uploadedSize / totalSize) * 100;
-        setUploadProgress(progress);
-      }, 1000);
+        // 更新进度 - 保留2位小数
+        const progress = Math.min((uploadedSize / totalSize) * 100, 99.99);
+        setUploadProgress(parseFloat(progress.toFixed(2)));
+      }, 200); // 改为200ms更新一次，提供更准确的速度计算
       
       // 上传所有文件
       const uploadedFiles: UploadedFile[] = [];
@@ -997,6 +999,37 @@ export default function FilesUpload() {
             
             // console.log(`【调试-startUpload】准备上传文件 ${file.name} 到服务器`);
             
+            // 创建基于时间的渐进式进度模拟
+            const startUploadTime = Date.now();
+            // 根据文件大小动态估算上传时间，考虑网络速度
+            const estimatedUploadTime = Math.max(
+              file.size / (1024 * 1024) / 3 * 1000, // 假设3MB/s的速度，1MB需要1/3秒
+              1000 // 最小1秒
+            );
+            let progressInterval: NodeJS.Timeout | null = null;
+            
+            // 开始渐进式进度更新
+            const progressPromise = new Promise<void>((resolve) => {
+              progressInterval = setInterval(() => {
+                const elapsed = Date.now() - startUploadTime;
+                const progressRatio = Math.min(elapsed / estimatedUploadTime, 0.95); // 最大95%
+                
+                // 计算当前文件的进度贡献
+                const fileProgress = progressRatio * file.size;
+                const previousFilesSize = files.slice(0, temp_n - 1).reduce((sum, f) => sum + f.size, 0);
+                uploadedSize = previousFilesSize + fileProgress;
+                
+                // 如果接近完成，停止进度更新并resolve
+                if (progressRatio >= 0.95) {
+                  if (progressInterval) {
+                    clearInterval(progressInterval);
+                    progressInterval = null;
+                  }
+                  resolve();
+                }
+              }, 100); // 改为100ms更新一次，提供更流畅的进度
+            });
+            
             // 使用Promise.race添加超时处理
             const uploadPromise = handleFileUpload(
               binaryData,
@@ -1015,11 +1048,19 @@ export default function FilesUpload() {
             const timeoutPromise = new Promise<FileUploadResponse>((_, reject) => {
               setTimeout(() => {
                 reject(new Error('上传超时'));
-              }, 600000); // 30秒超时
+              }, 600000); // 10分钟超时
             });
             
-            // 使用Promise.race处理超时
-            const uploadResult = await Promise.race([uploadPromise, timeoutPromise]);
+            // 并行执行上传和进度更新
+            const [uploadResult] = await Promise.all([
+              Promise.race([uploadPromise, timeoutPromise]),
+              progressPromise
+            ]);
+            
+            // 清除进度定时器
+            if (progressInterval) {
+              clearInterval(progressInterval);
+            }
             
             // 再次检查组件是否已卸载
             if (!isMountedRef.current) {
@@ -1900,7 +1941,7 @@ export default function FilesUpload() {
               fileName={`${currentFiles.length}个文件`}
               fileSize={formatFileSize(currentFiles.reduce((sum, file) => sum + file.size, 0))}
               progress={uploadProgress}
-              speed={uploadSpeed}
+              speed={''}
             />
           )}