大檔案上傳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效果圖
前端代碼示例
下面貼上完整前端代碼，自行修改請求路徑，也可以修改檔案的上傳配置，可以修改樣式，，，，
可以在監聽方法中寫自己想要的功能代碼，，，并且在上傳中還包含了進度條資訊可以看進度，，
<template>
<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>
</template>
import apis from "@apis";
import $ from "jquery";
import WebUploader from "webuploader";
export default {
data() {
return {
projectContract: {},
};
},
mounted() {
$("#btnSync").hide();
//該map,用于給uploader.options.formData表達賦一個動態的鍵值對.
var map = {};
// var testMd5;
//定義檔案的分片大小
var chunkSize = 0.9 * 1024 * 1024;
var _self = this;
//監聽分塊上存程序中的三個時間點
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();
// setTimeout(() => {
// if (!map[file.id]) {
// // deferred.reject();
// alert("檔案決議出錯,請重繪后重新上傳.");
// return deferred.promise();
// }
// }, 1000);
//顯示暫停按鍵并且隱藏洗掉按鍵
switchButton(file.id);
//先查看服務器中是否已經有該檔案
$.ajax({
type: "POST",
dataType: "json",
url: url_second_pass,//這是檢查是否傳過的請求路徑
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("span.state")
.text("已經上傳");
// deferred.resolve();
} else {
$("#" + file.id)
.find("span.state")
.text("正在上傳...");
deferred.resolve();
}
},
error: function (data) {
console.log("秒傳錯誤");
deferred.reject();
$("#" + file.id)
.find("span.state")
.text("秒傳出錯...");
alert("網路錯誤,請重繪后再上傳");
},
});
return deferred.promise();
},
//時間點2：如果有分塊上傳，則每個分塊上傳之前呼叫此函式
//用于檔案的續傳
beforeSend: function (block) {
console.log("執行時間點2的方法，，，");
var deferred = WebUploader.Deferred();
$.ajax({
type: "POST",
dataType: "json",
url: url_check_chunk,//這里是檢查檔案分塊的請求路徑
data: {
chunk: block.chunk,
//block.file.id,獲取該分片對應的檔案的id,從而獲取該檔案的md5值
md5Val: map[block.file.id],
},
success: function (data) {
console.log("成功切塊", 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("span.state")
.text("后臺正在合并檔案...");
//上傳成功后，異步請求后臺的servlet,發送的資料有guid（該檔案所有分片保存的目錄），chunks(該檔案一共分了多少片,注意要向上取整),filename(檔案名）
$.ajax({
type: "POST",
dataType: "json",
url: apis.url_merge_chunk,//這里是合并檔案的請求路徑
data: {
guid: uploader.options.formData.guid,
fileSize: file.size,
chunks: Math.ceil(file.size / chunkSize),
fileName: file.name,
md5Val: map[file.id],
},
success: (data) => {
if (data.status === "success") {
$("#" + file.id)
.find("span.state")
.text("已經上傳");
} else {
$("#" + file.id)
.find("span.state")
.text("上傳失敗");
}
},
error: function (data) {
console.log("合并錯誤");
$("#" + file.id)
.find("span.state")
.text("合并檔案出錯...");
},
});
console.log("執行時間點3的方法，，，");
},
}
);
var uploader = WebUploader.create({
// swf檔案路徑
swf: "webuploader/Uploader.swf",
// 檔案接收服務端，
server: apis.url_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,
//禁用全域拖拽功能
disableGlobalDnd: true,
// 不壓縮image, 默認如果是jpeg，檔案上傳前會壓縮一把再上傳！
resize: false,
});
// 當有檔案被添加進佇列的時候觸發
uploader.on("fileQueued", function (file) {
// file.statusText = "未上傳"
console.log("添加", file);
$("#thelist").append(
'<div id="' +
file.id +
'" class="item">' +
'<span class="info">' +
file.name +
"</span>" +
'<span class="state">等待上傳...</span>' +
'<button class="btn btn-info btn-stop" style="display:none;">' +
"暫停" +
"</button>" +
'<a id="del" 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%;" >' +
"</div>" +
"</div>" +
"</div>"
);
new WebUploader.Uploader()
.md5File(file, 0, 10 * 1024 * 1024)
.progress(function (percentage) {
$("#" + file.id)
.find("span.state")
.text("正在讀取檔案資訊..." + parseInt(percentage * 100) + "%");
})
//當檔案讀取完后，就執行then方法
.then(function (md5Val) {
map[file.id] = md5Val;
$("#" + file.id)
.find("span.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");
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;
//漸變的效果的消失
$(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", (file) => {
switchButton(file.id);
console.log("執行上傳成功的方法，，");
$("#" + file.id)
.find("span.state")
.text("上傳成功，，，");
});
uploader.on("uploadError", function (file) {
switchButton(file.id);
$("#" + file.id)
.find("span.state")
.text("uploadError上傳出錯...");
});
//不管所有分片發送成功或者失敗都會執行該方法
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;
}
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");
}
}
},
methods: {
},
};
</script>
<style lang="scss" scope>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/136434.html
標籤：其他
上一篇：2020-09-26周總結