计算大文件MD5值实现文件秒传

日常开发过程中，经常会遇到需要上传文件的问题，有时候文件会特别的大，这时候需要考虑文件秒传，文件分片上传。 以此来实现高效上传，提升用户体验。本文主要介绍文件秒传。

 

秒传关键在于计算文件MD5值，前端计算文件MD5值的常用工具为 spark-md5 它能够非常快速的计算大文件的MD5值, 满足开发需求。 

import SparkMD5 from 'spark-md5';

/**
 * 计算文件Md5
 * 将文件分片逐步计算最终合并得出整个文件md5, 提升计算速度
 * @param {*} file
 */
 
 export default function computeFileMD5(file) { 
   return new Promise((resolve, reject) => {
      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
     let chunkSize = 2 * 1024 * 1024;  // 按照一片 2MB 分片
      let chunks = Math.ceil(file.size / chunkSize); // 片数
      let currentChunk = 0;
      let spark = new SparkMD5.ArrayBuffer();
      let fileReader = new FileReader();
      
      fileReader.onload = function (e) {
        console.log('read chunk nr', currentChunk + 1, 'of', chunks);
        spark.append(e.target.result);
        currentChunk++;
        console.log('执行进度：'+((currentChunk/chunks)*100)+'%');
        if (currentChunk < chunks) {
          loadNext();
        } else {
          console.log('finished loading');
          let md5 = spark.end(); //最终md5值
          spark.destroy(); //释放缓存
          resolve(md5);
        }
      };
      
      fileReader.onerror = function (e) {
        console.warn('oops, something went wrong.');
        reject(e);
      };
      
      function loadNext() {
        let start = currentChunk * chunkSize
        let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
      }

      loadNext();
      
   }) 
 }