bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-16 23:22:20 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

文件上传进度显示完成

Browse Source
This commit is contained in:
小墨
2022-04-08 18:12:27 +08:00
parent 357a1bd42e
commit 2df583ab61
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bookshelfplus-frontend/views/dashboard/admin/FileManage_Upload.html
View File

@@ -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);
};