//文件路徑
  var filePath = "file://upload/test.png";
  //獲取最后一個.的位置
  var index= filePath.lastIndexOf(".");
  //獲取后綴
  var ext = filePath.substr(index+1);
  //輸出結果
  console.log(ext);
  // 輸出： png

??<template>
??<div>
????<input
??????type="file"
??????id="inputFile"
??????@change="handleChange"
????/>
??</div>
</template>

<script>
export?default?{
??name:?"HelloWorld",
??methods:?{
????check(headers)?{
??????return?(buffers,?options?=?{?offset:?0?})?=>

??????headers.every(

??????(header,?index)?=>?header?===?buffers[options.offset?+?index]

??????);
????},
????async?handleChange(event)?{
??????const?file?=?event.target.files[0];

??????//?以PNG為例，只需要獲取前8個字節(jié)，即可識別其類型
??????const?buffers?=?await?this.readBuffer(file,?0,?8);

??????const?uint8Array?=?new?Uint8Array(buffers);

??????const?isPNG?=?this.check([0x89,?0x50,?0x4e,?0x47,?0x0d,?0x0a,?0x1a,?0x0a]);

??????//?上傳test.png后，打印結果為true
??????console.log(isPNG(uint8Array))

????},
????readBuffer(file,?start?=?0,?end?=?2)?{
??????//?獲取文件的二進制數(shù)據(jù)，因為我們只需要校驗前幾個字節(jié)即可，所以并不需要獲取整個文件的數(shù)據(jù)
????????return?new?Promise((resolve,?reject)?=>?{
??????????const?reader?=?new?FileReader();

??????????reader.onload?=?()?=>?{
????????????resolve(reader.result);
??????????};

??????????reader.onerror?=?reject;

??????????reader.readAsArrayBuffer(file.slice(start,?end));
????????});
????}
??}
};
</script>

??//?upload.js

??//?創(chuàng)建一個worker對象
??const?worker?=?new?worker('worker.js')
??//?向子線程發(fā)送消息，并傳入文件對象和切片大小，開始計算分割切片
??worker.postMessage(file,?DefualtChunkSize)

??//?子線程計算完成后，會將切片返回主線程
??worker.onmessage?=?(chunks)?=>?{
????...
??}

??//?worker.js

??//?接收文件對象及切片大小
??onmessage?(file,?DefualtChunkSize)?=>?{
????let?blobSlice?=?File.prototype.slice?||?File.prototype.mozSlice?||?File.prototype.webkitSlice,
??????chunks?=?Math.ceil(file.size?/?DefualtChunkSize),
??????currentChunk?=?0,
??????spark?=?new?SparkMD5.ArrayBuffer(),
??????fileReader?=?new?FileReader();

????fileReader.onload?=?function?(e)?{
??????console.log('read?chunk?nr',?currentChunk?+?1,?'of');

??????const?chunk?=?e.target.result;
??????spark.append(chunk);
??????currentChunk++;

??????if?(currentChunk?<?chunks)?{
????????loadNext();
??????}?else?{
????????let?fileHash?=?spark.end();
????????console.info('finished?computed?hash',?fileHash);
????????//?此處為重點，計算完成后，仍然通過postMessage通知主線程
????????postMessage({?fileHash,?fileReader?})
??????}
????};

????fileReader.onerror?=?function?()?{
??????console.warn('oops,?something?went?wrong.');
????};

????function?loadNext()?{
??????let?start?=?currentChunk?*?DefualtChunkSize,
????????end?=?((start?+?DefualtChunkSize)?>=?file.size)???file.size?:?start?+?DefualtChunkSize;
??????let?chunk?=?blobSlice.call(file,?start,?end);
??????fileReader.readAsArrayBuffer(chunk);
????}

????loadNext();
??}

//?檢查是否已存在相同文件
???async?function?checkAndUploadChunk(chunkList,?fileMd5Value)?{
????const?requestList?=?[]
????//?如果不存在，則上傳
????for?(let?i?=?0;?i?<?chunkList;?i++)?{
??????requestList.push(upload({?chunkList[i],?fileMd5Value,?i?}))
????}

????//?并發(fā)上傳
????if?(requestList?.length)?{
??????await?Promise.all(requestList)
????}
??}

?//?上傳chunk
??function?upload({?chunkList,?chunk,?fileMd5Value,?i?})?{
????current?=?0
????let?form?=?new?FormData()
????form.append("data",?chunk)?//切片流
????form.append("total",?chunkList.length)?//總片數(shù)
????form.append("index",?i)?//當前是第幾片?????
????form.append("fileMd5Value",?fileMd5Value)
????return?axios({
??????method:?'post',
??????url:?BaseUrl?+?"/upload",
??????data:?form
????}).then(({?data?})?=>?{
??????if?(data.stat)?{
????????current?=?current?+?1
????????//?獲取到上傳的進度
????????const?uploadPercent?=?Math.ceil((current?/?chunkList.length)?*?100)
??????}
????})
??}