From 2df583ab6162cdc7d4fc94290fae7ed21d53b451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
 <2291200076@qq.com>
Date: Fri, 8 Apr 2022 18:12:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=98=BE=E7=A4=BA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/admin/FileManage_Upload.html    | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/bookshelfplus-frontend/views/dashboard/admin/FileManage_Upload.html b/bookshelfplus-frontend/views/dashboard/admin/FileManage_Upload.html
index f5a8576..6fa7d13 100644
--- a/bookshelfplus-frontend/views/dashboard/admin/FileManage_Upload.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/FileManage_Upload.html
@@ -77,10 +77,14 @@
         文件大小: <span id="file-size"></span><br>
         文件SHA1: <span id="file-sha1"></span><br>
     </p>
-    <p>计算文件哈希</p>
-    <div id="processBar1" class="process-bar" style="">
+    <p>计算文件哈希进度</p>
+    <div id="processBar1" class="process-bar">
         <div id="processBar1Inner" class="process-bar-inner"></div>
     </div>
+    <p>文件上传进度</p>
+    <div id="processBar2" class="process-bar">
+        <div id="processBar2Inner" class="process-bar-inner"></div>
+    </div>
 </div>
 <button id="beginUpload" disabled="true">开始上传</button>
 
@@ -279,6 +283,7 @@
             fileInfo = {};
             document.getElementById("fileSize").innerHTML = "0";
             document.getElementById("processBar1Inner").style.width = 0;
+            document.getElementById("processBar2Inner").style.width = 0;
             document.getElementById("file-name").innerHTML = "";
             document.getElementById("file-ext").innerHTML = "";
             document.getElementById("file-name-no-ext").innerHTML = "";
@@ -304,13 +309,14 @@
             return;
         }
         // 获取预授权URL
-        postRequest("/file/cos/put", { token: localStorageUtils.getToken(), fileName: "test.a", expireMinute: 30 })
+        postRequest("/file/cos/put", { token: localStorageUtils.getToken(), fileName: fileInfo.fileSha1, expireMinute: 30 })
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;
                 var data = axiosData.data;
                 if (status === "success") {
                     console.log(data);
+                    // 取得预授权URL，使用该URL进行文件上传
                     uploadFile(file, data);
                 } else {
                     alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
@@ -330,6 +336,17 @@
         // 获取到 Url 后，前端可以这样 ajax 上传
         var xhr = new XMLHttpRequest();
         xhr.open('PUT', preSignedUrl, true);
+        xhr.upload.onprogress = function (e) {
+            // e.lengthComputable是一个布尔值,表示当前上传的资源是否有可计算的长度
+            if (e.lengthComputable) {
+                // 计算出上传的进度
+                // e.loaded 已传输的字节
+                // e.total 需传输的总字节
+                var procentComplete = Math.ceil((e.loaded / e.total) * 100);
+                document.getElementById("processBar2Inner").style.width = `${procentComplete}%`;
+                console.log("上传进度", procentComplete);
+            }
+        };
         xhr.onload = function (e) {
             console.log('上传成功', xhr.status, xhr.statusText);
         };