企業網盤之分片上傳組件

效果展現

 包含技術點

一、分片上傳。

二、文件秒傳。

三、文件夾上傳

四、文件續傳。

五、文件拖拽上傳。

組件目錄

 

實現分析

分片上傳

經過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>

 參照文章

http://www.javashuo.com/article/p-nvfarivn-dv.html

原文出處：https://www.cnblogs.com/shawnyung/p/9716911.html