feat: 添加文件上传进度条功能，优化用户上传体验；更新相关样式和结构

Author: CharyeahOwO

public/assets/admin/upload-preview.js

@@ -169,6 +169,12 @@ export function initUploadPreview() {
   }
 
   if (uploadForm && fileInput) {
+    const uploadProgress = $('#uploadProgress');
+    const progressBar = $('#progressBar');
+    const progressPercent = $('#progressPercent');
+    const progressBytes = $('#progressBytes');
+    const progressSpeed = $('#progressSpeed');
+
     uploadForm.addEventListener('submit', (event) => {
       if (uploadForm.dataset.submitting === 'true') {
         event.preventDefault();
@@ -180,8 +186,83 @@ export function initUploadPreview() {
         showUploadMessage('请先选择或拖入至少一张图片。', 'error');
         return;
       }
+
+      event.preventDefault();
       uploadForm.dataset.submitting = 'true';
-      setSubmitLoading(event.submitter || uploadForm.querySelector('button[type="submit"]'), '上传中...');
+      const submitBtn = event.submitter || uploadForm.querySelector('button[type="submit"]');
+      setSubmitLoading(submitBtn, '上传中...');
+      clearUploadMessage();
+
+      if (uploadProgress) {
+        uploadProgress.hidden = false;
+        uploadProgress.setAttribute('aria-valuenow', '0');
+        progressBar.value = 0;
+        progressPercent.textContent = '0%';
+        progressBytes.textContent = '0 B / 0 B';
+        progressSpeed.textContent = '0 B/s';
+      }
+
+      const formData = new FormData(uploadForm);
+      const xhr = new XMLHttpRequest();
+      let lastLoaded = 0;
+      let lastTime = Date.now();
+
+      xhr.upload.onprogress = (e) => {
+        if (!uploadProgress) return;
+        const now = Date.now();
+        const timeDiff = (now - lastTime) / 1000;
+
+        if (timeDiff > 0.2 || e.loaded === e.total) {
+          const loadedDiff = e.loaded - lastLoaded;
+          const speed = timeDiff > 0 ? loadedDiff / timeDiff : 0;
+
+          if (e.lengthComputable) {
+            const percent = Math.round((e.loaded / e.total) * 100);
+            progressBar.value = percent;
+            uploadProgress.setAttribute('aria-valuenow', String(percent));
+            progressPercent.textContent = `${percent}%`;
+            progressBytes.textContent = `${formatSize(e.loaded)} / ${formatSize(e.total)}`;
+          } else {
+            progressBar.removeAttribute('value');
+            progressPercent.textContent = '上传中...';
+            progressBytes.textContent = `${formatSize(e.loaded)}`;
+          }
+
+          progressSpeed.textContent = `${formatSize(speed)}/s`;
+
+          lastLoaded = e.loaded;
+          lastTime = now;
+        }
+      };
+
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 400) {
+          let redirect = uploadForm.action.split('?')[0];
+          try {
+            redirect = JSON.parse(xhr.responseText).redirect || redirect;
+          } catch {}
+          window.location.href = redirect;
+        } else {
+          handleUploadError(new Error(`HTTP ${xhr.status}`));
+        }
+      };
+
+      xhr.onerror = () => {
+        handleUploadError(new Error('网络错误，上传失败'));
+      };
+
+      function handleUploadError(err) {
+        uploadForm.dataset.submitting = 'false';
+        submitBtn.disabled = false;
+        submitBtn.textContent = submitBtn.dataset.originalText || '上传图片';
+        if (uploadProgress) uploadProgress.hidden = true;
+        showUploadMessage(`上传失败: ${err.message}`, 'error');
+      }
+
+      xhr.open(uploadForm.method, uploadForm.action);
+      xhr.setRequestHeader('Accept', 'application/json');
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.send(formData);
     });
   }
 

public/assets/style.css

@@ -864,6 +864,53 @@ input[type="file"] {
   border-color: #bde2dd;
 }
 
+.upload-progress {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+}
+
+.upload-progress[hidden] {
+  display: none;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  background: #e3e9f2;
+  accent-color: var(--primary);
+}
+
+.progress-bar::-webkit-progress-bar {
+  border-radius: 999px;
+  background: #e3e9f2;
+}
+
+.progress-bar::-webkit-progress-value {
+  border-radius: 999px;
+  background: var(--primary);
+  transition: width 0.2s ease;
+}
+
+.progress-bar::-moz-progress-bar {
+  border-radius: 999px;
+  background: var(--primary);
+}
+
+.progress-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--muted);
+  font-weight: 750;
+}
+
 .selected-files {
   border: 1px solid var(--line);
   border-radius: var(--radius);

src/routes/adminRoutes.js

@@ -229,6 +229,17 @@ function imageSectionRedirect(req) {
   }
 }
 
+function wantsJson(req) {
+  return req.get('x-requested-with') === 'XMLHttpRequest' || req.accepts(['html', 'json']) === 'json';
+}
+
+function sendUploadResult(req, res, status = 200) {
+  if (wantsJson(req)) {
+    return res.status(status).json({ redirect: config.adminPath });
+  }
+  return res.redirect(config.adminPath);
+}
+
 function apiExamples(adminPath) {
   const examples = [
     '/image/api/random',
@@ -377,10 +388,10 @@ export function createAdminRouter(store) {
         type: results.failed.length ? 'error' : 'success',
         text: messages.join('。') || '没有收到上传文件'
       };
-      res.redirect(config.adminPath);
+      return sendUploadResult(req, res);
     } catch (error) {
       req.session.flash = { type: 'error', text: error.message };
-      res.redirect(config.adminPath);
+      return sendUploadResult(req, res, 400);
     }
   });
 

views/admin-dashboard.html

@@ -105,6 +105,14 @@ <h2>上传图片</h2>
               <span>可分批选择或拖拽追加，支持 jpg、jpeg、png、webp、gif、avif；最多 {{maxUploadFiles}} 张，单张 {{maxFileSizeMb}}MB。</span>
             </label>
             <div id="uploadMessage" class="upload-message" hidden></div>
+            <div id="uploadProgress" class="upload-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" hidden>
+              <progress id="progressBar" class="progress-bar" value="0" max="100"></progress>
+              <div class="progress-stats">
+                <span id="progressPercent">0%</span>
+                <span id="progressBytes">0 B / 0 B</span>
+                <span id="progressSpeed">0 B/s</span>
+              </div>
+            </div>
             <div id="fileList" class="selected-files" hidden></div>
             <button id="uploadSubmit" type="submit">上传图片</button>
           </form>