企業網盤之分片上傳元件
效果展示
包含技術點
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>