企業網盤之分片上傳元件
效果展示
包含技術點
1、分片上傳。
2、檔案秒傳。
3、資料夾上傳
4、檔案續傳。
5、檔案拖拽上傳。
元件目錄
實現分析
分片上傳
通過H5 FileUpload物件可以實現檔案上傳， mutiple屬性可以支援檔案多選。拿到檔案物件後，呼叫完整的分片上傳流程：計算MD5-新增檔案-獲取鑑權資訊-遞迴上傳分片-上傳完成。
如何切割檔案分片？
方法介紹：blob.slice(); 屬於Blob物件的一個方法,而File物件是繼承Blob物件的,因此File物件也含有slice方法。
如何計算進度？
通過檔案大小及分片計算演算法，算出分片大小和分片數目以後，通過當前上傳的分片數目除以總共分片數目得到進度資訊。
如何計算上傳速度？
每上傳一個分片，記錄分片上傳請求的時間，通過分片的大小除以請求時間得到速度資訊。
上傳分片的程式碼：
//上傳分片
const uploadPart = (resolve, reject) => {
let blob = file.slice((params.PartNumber - 1) * chunkSize, params.PartNumber * chunkSize);
let begin = new Date().getTime();
params['Body'] = blob;
s3.uploadPart(params, function (err, data) {
if (err || item.status !== 'uploading') {
reject(err || item.status);
} else {
item.percentage = Math.round(params.PartNumber * 100 / frameNum); // 進度
let spend = (new Date().getTime() - begin) / 1000;// 消耗時間
item.speed = Math.round(blob.size / spend) * 1.3;// 速度
log_content.frameSeq = params.PartNumber;
l_params.logContent = JSON.stringify(log_content);
// debugger;
log(l_params).then(() => {
if (params.PartNumber < frameNum) {
params.PartNumber += 1;
uploadPart(resolve, reject);
} else {
item.status = 'success';
resolve();
}
}).catch((err) => {
reject(err);
});
}
});
};
檔案秒傳
秒傳是將上傳的檔案與伺服器中的檔案進行比對，若雲端存在相同檔案，則將直接把檔案秒速儲存到你的網盤。呼叫“新增檔案”介面，若服務端返回檔案ID，表明雲端已儲存相同檔案，新的檔案會儲存為原始檔的一份索引。
資料夾上傳
chrome的私有屬性webkitdiretory可以支援資料夾上傳。分片上傳流程需要增加遞迴建立資料夾：遞迴建立資料夾-計算MD5-新增檔案-獲取鑑權資訊-遞迴上傳分片-上傳完成。
判斷檔案為資料夾上傳？
file.webkitRelativePath屬性。
判斷檔案是否一次上傳？
這裡要處理的場景是，一個資料夾上傳兩次，第二次需要對資料夾重新命名。如何判斷一批檔案是一次上傳的，還是同名資料夾上傳多次。可以通過上傳框change的時候，構造檔案物件增加時間戳屬性，同一批檔案的時間戳相同。
HTML：
<input ref="folder" @change='handleChange' name="folderInput" multiple="" webkitdirectory="" accept="*/*" type="file">
遞迴建立資料夾可參考Node演算法：
const mkdirs = (dirname, callback, errback) => {
fs.stat(dirname, (err, stats) => {
if (err) {
mkdirs(path.dirname(dirname), () => {
fs.mkdir(dirname, callback)
}, errback)
} else {
if (stats.isDirectory()) {
callback()
} else {
errback()
}
}
})
}
檔案續傳
大檔案在上傳過程中進行中斷網路或重新整理瀏覽器等操作，重新登入可斷點上傳。後臺記錄檔案上傳的分片資訊，當上傳過程被終止以後，重新登入查詢當前使用者未上傳成功的續傳列表。儲存那邊會保留已上傳的分片，斷點上傳從未上傳的分片開始，可大大減少大檔案上傳終止需重新上傳的時間。
檔案拖拽上傳
H5新特性可實現檔案拖拽上傳。其中，與拖拽檔案相關的事件有 dragover(檔案拖拽在懸浮) 、 dragleave(檔案拖拽離開) 、 drop(檔案拖拽放下)。在事件物件中，一個 e.dataTransfer這樣的屬性，它是一個DataTransfer型別的資料，有如下的屬性
| 屬性 | 型別 | 說明 |
| files | FileList | 拖拽的檔案列表 |
| items | DataTransferItemList | 拖拽的資料(有可能是字串) |
| types | Array | 拖拽的資料型別 該屬性在Safari下比較混亂 |
完整的元件程式碼：
<template>
<div
class="uploadMask"
style="position: fixed"
:class="{
'is-dragover': dragover
}"
v-show="dragover"
@drop.prevent="onDrop"
@dragover.prevent="onDragover"
@dragleave.prevent="dragover = false"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ElUploadDrag',
props: {
disabled: Boolean
},
data() {
return {
dragover: false
};
},
methods: {
onDragover() {
if (!this.disabled) {
this.dragover = true;
}
},
/*eslint-disable*/
onDrop(e) {
let _this = this;
if (!this.disabled) {
let event = e || window.event;
this.dragover = false;
let df = event.dataTransfer;// 拖曳操作的過程中，我們可以用過dataTransfer物件來傳輸資料，以便在拖曳操作結束的時候對資料進行其他的操作;
let len = df.files.length;
let dealFileCnt = 0; // 讀取檔案是個非同步的過程，需要記錄處理了多少個檔案了
let files = [];
function callback (files) { // 丟擲檔案陣列
_this.$emit('file', files);
}
// 檢測是否已經把所有的檔案都遍歷過了
function checkDropFinish () {
if ( dealFileCnt === len - 1 ) {
console.log('ie');
callback(files); //所有的檔案都遍歷過了emit 出去
}
dealFileCnt++;
}
if (df.items) {// 有dataTransfer專案列表時
for (let i = 0; i < len; i++) {
let entry = df.items[i].webkitGetAsEntry(); // 讀取拖拽元素資訊
if (entry.isFile && !entry.isDirectory) {// isDirectory是否是資料夾
files.push(df.files[i]);
}
}
callback(files);
} else {// ie瀏覽器
for (let i = 0; i < len; i++) {
let dropFile = df.files[i];
if (dropFile.type) {
files.push(dropFile);
checkDropFinish()
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener('load', function (e) {
console.log(e, 'load');
files.push(dropFile);
checkDropFinish();
}, false);
fileReader.addEventListener('error', function (e) {
console.log(e, 'error，不可以上傳資料夾');
checkDropFinish();
}, false);
} catch (e) {
console.log(e, 'catch error，不可以上傳資料夾');
checkDropFinish();
}
}
}
}
}
}
},
mounted() {
let app = document.getElementsByClassName('app')[0];
app.ondragstart = function (e) { // 拖拽開始
e.preventDefault();//取消預設的連結元素和圖片元素拖拽會觸發拖拽上傳
};
app.addEventListener('dragover', (e) => {// 拖拽到另一個容器是促發
e.preventDefault();
this.onDragover();
});
}
};
</script>