大檔案上傳vue+WebUploader
2020-09-28 11:01:39
大檔案上傳vue+WebUploader
說說我實習前端開發的時候用的大檔案上傳，前端原本專案用的是element自帶的el-upload檔案上傳，確實很方便，element把資料上傳成功，失敗，上傳中等等的監聽事件都已經封裝好了，檔案列表和檔案資訊也攜帶在監聽方法的引數中，呼叫然後列印，，一目瞭然，進行業務邏輯開發效率很高。但問題是，，element的upload沒有附帶大檔案的斷點續傳功能，上傳過程中如果中斷那麼就比較麻煩，所以需要自己開發。
什麼是斷點續傳？
當使用者上傳檔案過程中如果由於網路，，手滑，，或者其他騷操作等種種原因突然中斷上傳，那原本上傳一半的檔案要怎麼處理？？？下次上傳這個檔案還得全部重來？？這樣是很浪費效能和資源的。並且，http協定和Springboot都限制了檔案的上傳大小，檔案太大怎麼辦？？這個時候，大檔案的斷點續傳技術完美解決。
它將一個檔案切割成若干部分分開向伺服器端上傳，每個小的部分我們稱為切塊，每上傳結束一個切塊除了儲存檔案資訊，還會在後端儲存切塊的「」識別碼」，用於識別檔案上傳到哪兒了，等到下次上傳時，直接從這個位置開始繼續上傳，這樣大大節省了開銷。而且還有一個亮點，如果檔案已經上傳過，那麼可以對後臺進行秒傳，節省大量時間，使用者體驗也大大提高。
想要實現大檔案斷點續傳，我們只需要安裝一個外掛WebUploader，然後在前端js程式碼中觸發監聽，設定相關的變數就可以實現斷點續傳了，靈活性很高。。。
外掛安裝方法
外掛的底層原始碼是用JQuery封裝的，所以需要安裝JQuery
如果是vue專案，npm安裝到環境中：
npm install JQuery
npm install WebUploader
然後在vue頁面中引入：
import $ from Jquery
import webUploader from WebUploader
然後就可以在專案中觸發對應的方法和設定了。。
上傳原理流程
WebUploader分為三個部分：
1.註冊三個事件，檔案上傳前，分片上傳前和分片上傳後，建立WebUploader範例物件，組態檔塊大小，上傳地址，檔案限制大小等變數。。
2.先判斷是否上傳過該檔案，呼叫介面。如果上傳過，進行秒傳，沒有則進行切塊。
3.切塊後進行分片上傳，獲取分片的編號，確認分片，
4.等全部分片上傳完成後向後端請求合併分塊，成一個完整的檔案。
html效果圖
前端程式碼範例
下面貼上完整前端程式碼，自行修改請求路徑，也可以修改檔案的上傳設定，可以修改樣式，。。。
可以在監聽方法中寫自己想要的功能程式碼。。。並且在上傳中還包含了進度條資訊可以看進度。。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="webuploader.min.js"></script>
<link href="webuploader.css" type="css/text"/>
<style type="text/css">
.test-bar {
height: 100%;
background-color: #0b0e9e;
}
input{
height: 0px;
}
</style>
</head>
<body>
<div class="uploadWrapper">
<div class="btnUpload">
<div id="picker" class="form-control-focus">點選選擇檔案上傳</div>
</div>
<div id="thelist" class="uploader-list">
</div>
<button id="btnSync" type="button" class="btn btn-warning">開始同步</button>
</div>
<script>
//專案ip
function getRootPath(){
return("http://localhost:53021");
}
getRootPath();
$("#btnSync").hide();
//該map,用於給uploader.options.formData表達賦一個動態的鍵值對.
var map = {};
// var testMd5;
//定義檔案的分片大小
var chunkSize = 0.9 * 1024 * 1024;
//監聽分塊上存過程中的三個時間點
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",//整個檔案上存前,觸發方法beforeSendFile
"before-send": "beforeSend",//每個分片上存前,觸發方法beforeSend
"after-send-file": "afterSendFile",//分片上存完畢後,觸發方法afterSendFile
},
{
//時間點1:所有分塊進行上存之前觸發該方法,即當每個檔案開始上傳第一個分塊前就呼叫該方法
beforeSendFile: function (file) {
console.log("執行時間點1的方法。。。。。");
//定義一個非同步物件
var deferred = WebUploader.Deferred();
if (!map[file.id]) {
deferred.reject();
alert("檔案解析出錯,請重新整理後重寫上傳.");
return deferred.promise();
}
//顯示暫停按鍵並且隱藏刪除按鍵
switchButton(file.id);
//先檢視伺服器中是否已經有該檔案
$.ajax({
type: "POST",
dataType: "json",
url: getRootPath()+"/resource/secondPass",
// timeout: 3000,
data: {
"fileSize": file.size,
"fileName": file.name,
"md5Val": map[file.id]
},
success: function (data) {
if (data.status === "1") {
console.log("............................................輸出返回值：" + data.status);
deferred.reject();
uploader.skipFile(file);
//清除進度條,如果是秒傳，那麼是不會觸發方法uploader.on('uploadComplete'
fadeOutProgress(file);
$('#' + file.id).find("p.state").text("已經上傳");
deferred.resolve();
} else {
$('#' + file.id).find("p.state").text("正在上傳...");
deferred.resolve();
}
},
error: function (data) {
deferred.reject();
console.log(JSON.stringify(data));
$('#' + file.id).find("p.state").text("上傳出錯...");
alert("網路錯誤,請重新整理後再上傳");
}
});
return deferred.promise();
},
//時間點2：如果有分塊上傳，則每個分塊上傳之前呼叫此函數
//用於檔案的續傳
beforeSend: function (block) {
console.log("執行時間點2的方法。。。");
var deferred = WebUploader.Deferred();
$.ajax({
type: "POST",
dataType: "json",
url: getRootPath()+"/resource/checkChunk",
data: {
"chunk": block.chunk,
//block.file.id,獲取該分片對應的檔案的id,從而獲取該檔案的md5值
"md5Val": map[block.file.id]
},
success: function (data) {
if (data.status === "1") {
console.log("跳過..");
//分片存在,跳過
deferred.reject();
} else {
console.log("上傳..");
//分片不存在,那麼就上傳.
deferred.resolve();
}
},
error: function (data) {
console.log("時間點2出錯:" + JSON.stringify(data));
//如果是一般的請求出錯,那麼也可以嘗試上傳
deferred.resolve();
}
});
return deferred.promise();
},
//時間點3:一個檔案的所有分片上傳成功後，呼叫該方法,讓後臺合併所有分片
//該方法的在uploader.on("success")方法前執行。
afterSendFile: function (file) {
$('#' + file.id).find('p.state').text("後臺正在合併檔案...");
//上傳成功後，非同步請求後臺的servlet,傳送的資料有guid（該檔案所有分片儲存的目錄），chunks(該檔案一共分了多少片,注意要向上取整),filename(檔名）
$.ajax({
type: "POST",
dataType: "json",
url: getRootPath()+"/resource/mergeChunk",
data: {
"guid": uploader.options.formData.guid,
"fileSize": file.size,
"chunks": Math.ceil(file.size / chunkSize),
"fileName": file.name,
"md5Val": map[file.id]
},
success: function (data) {
console.log(JSON.stringify(data))
if (data.status === "success") {
$('#' + file.id).find('p.state').text('已經上傳');
} else {
$('#' + file.id).find('p.state').text('上傳失敗');
}
},
error: function (data) {
alert(JSON.stringify(data));
$('#' + file.id).find("p.state").text("上傳出錯...");
}
});
console.log("執行時間點3的方法。。。");
}
});
var uploader = WebUploader.create({
// swf檔案路徑
swf: 'webuploader/Uploader.swf',
// 檔案接收伺服器端。
server: getRootPath()+'/resource/upload',
// 選擇檔案的按鈕。可選。
// 內部根據當前執行是建立，可能是input元素，也可能是flash.
pick: '#picker',
compress: null,//圖片不壓縮
chunked: true, //分片處理
chunkSize: chunkSize, //每片5M
chunkRetry: 3,//由於網路原因出現的故障，最多允許分片自動重轉3次
threads: 8,//上傳並行數。允許同時最大上傳程序數。
fileSizeLimit: 12 * 1024 * 1024 * 1024,//12G 驗證檔案總大小是否超出限制, 超出則不允許加入佇列
fileSingleSizeLimit: 5 * 1024 * 1024 * 1024, //5G 驗證單個檔案大小是否超出限制, 超出則不允許加入佇列
fileNumLimit: 100,
formData: {
test: 123
},
//禁用全域性拖拽功能
disableGlobalDnd: true,
// 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
resize: false
});
console.log(uploader.upload());
// 當有檔案被新增進佇列的時候觸發
uploader.on('fileQueued', function (file) {
alert("123");
console.log(file);
$("#thelist").append(
'<div id="' + file.id + '" class="item">'
+ '<h4 class="info">' + file.name + '</h4>'
+ '<p class="state">等待上傳...</p>'
+ '<button class="btn btn-info btn-stop" style="display:none;">' + '暫停' + '</button>'
+ '<a href="javascript:void(0);" class="btn btn-primary file_btn btnRemoveFile" >' + '刪除' + '</a>'
+ '<div class="progress">'
+ '<div id="' + file.id + 'progress" class="test-bar" style="width: 0%;" >'
+ "<span>"
+ "</span>"
+ '</div>'
+ '</div>'
+ '</div>');
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {
$('#' + file.id).find('p.state').text("正在讀取檔案資訊..." + parseInt(percentage * 100) + "%");
})
//當檔案讀取完後，就執行then方法
.then(function (md5Val) {
map[file.id] = md5Val;
$('#' + file.id).find("p.state").text("成功讀取檔案資訊");
//uploader.options.formData.file.id=md5Val,這種方式中"file.id"只能作為一個字串
//下面種方式可以給uploader.options.formData表單動態賦一個鍵值對
$.extend(uploader.options.formData, map);
});
$("#btnSync").show();
var obj = 'div[id=' + file.id + ']';
console.log("列印id啊：" + $(obj).attr("id"));
//給「刪除」按鍵繫結監聽事件
$('#' + file.id + " a").bind("click", function () {
var fileItem = $(this).parent();
var fileId = $(fileItem).attr("id");
console.log("刪除",map);
if (!map[fileId]) {
alert("正在解析檔案，請稍後再操作...")
return;
}
// console.log("輸出id:" +fileId);
//$(fileItem).attr("id")意思是，獲取到fileItem該標籤的id屬性的值,true為從佇列中移除
uploader.removeFile(file, true);
//同時取消檔案上傳
uploader.cancelFile(file);
delete map[fileId];
var len = $('#thelist').children("div").length;
console.log("刪除前的檔案列表長度：" + len);
//漸變的效果的消失
$(fileItem).fadeOut(function () {
$(fileItem).remove();
});
//由於上面的remove方法是非同步刪除，因此當下面獲取長度的時候，長度還是不變，因此當長度為1的時候，其實list中就沒有檔案了
var len = $('#thelist').children("div").length;
console.log("列印檔案列表長度：" + len);
if (len === 0||len===1) {
$("#btnSync").hide();
}
});
//給「暫停」按鍵繫結監聽事件
$('#' + file.id + " button").bind("click", function () {
console.log("暫停");
clickStopButton(file);
});
});
//上傳過程中，一直會執行該方法
uploader.on('uploadProgress', function (file, percentage) {
console.log("當前檔案" + file.id + "上傳的百分比" + percentage + "\n");
//因為percentage是百分比（小數來的），因此要顯示進度條效果，就先乘100，然後(percentage*100)%作為進度條的寬度百分比，
// 就可以實現進度條效果
// $('#' + file.id).children($("#test-bar")).css("width", parseInt(percentage * 100) + "%");
$('#' + file.id + 'progress').css("width", parseInt(percentage * 100) + "%");
});
/**
* 檔案上傳成功後，就在該檔案對應的位置上，顯示上傳成功，file.id,作為上傳檔案位置標籤的id,
*/
uploader.on('uploadSuccess', function (file) {
switchButton(file.id);
console.log("執行上傳成功的方法。。");
// $('#' + file.id).find("p.state").text("上傳成功。。。");
});
uploader.on('uploadError', function (file) {
switchButton(file.id);
$('#' + file.id).find('p.state').text('上傳出錯...');
});
//不管所有分片傳送成功或者失敗都會執行該方法
uploader.on('uploadComplete', function (file) {
console.log("執行上傳完成的方法");
// //上傳完成就刪除進度條
fadeOutProgress(file);
});
/**
* 當點選上傳檔案的時候，就觸發該方法
*/
$("#btnSync").on('click', function () {
//獲取檔案列表的長度
var len = $('#thelist').children("div").length;
//獲取計算出md5的檔案數
var mapSize = Object.keys(map).length;
//一定要全部檔案都計算出md5的值,才能上存
if (len !== mapSize) {
alert("檔案正在解析,請稍等..");
return;
}
console.log(uploader.upload());
uploader.upload();
});
//該方法刪除指定檔案下的進度條
function fadeOutProgress(file) {
$('#' + file.id).find('.progress').fadeOut();
}
//指定檔案下的，「暫停」鍵,和「刪除」按鍵切換顯示狀態，
function switchButton(fileId) {
var display= $('#' + fileId + " button").css('display');
if(display==='none') {
//暫停鍵顯示
$('#' + fileId + " button").css("display", "");
//刪除鍵隱藏
$('#' + fileId + " a").css("display", "none");
}else {
//暫停鍵隱藏
$('#' + fileId + " button").css("display", "none");
//刪除鍵顯示
$('#' + fileId + " a").css("display", "");
}
}
//指定檔案下，點選了「暫停」，則按鍵變為「繼續」，反之一樣
function clickStopButton(file) {
var content=$('#' + file.id + " button").text();
if(content.trim()==="暫停"){
//暫停上傳
uploader.stop(true);
console.log("暫停");
$('#' + file.id + " button").text("繼續").addClass("btn-warning");
//刪除鍵顯示
$('#' + file.id + " a").css("display", "");
}else if(content.trim()==="繼續"){
console.log("繼續");
//繼續上傳
uploader.upload();
$('#' + file.id + " button").text("暫停").removeClass("btn-warning");
//刪除鍵隱藏
$('#' + file.id + " a").css("display", "none");
}
}
// function testInterval() {
// var a = 0;
// var flag = setInterval(function () {
// a = a + 1;
// if (a === 5) {
// clearInterval(flag);
// }
// console.log("計時器。。。" + a)
// }, 1000);
//
//
// }
</script>
</body>
</html>