前端使用js計算文件的MD5值

在前端開發時有時須要計算文件的 MD5 值傳給後端用做比較文件的準確性和完整性。

前端計算 MD5 能夠使用插件 js-spark-md5 ，下載 spark-md5.min.js 存儲在本地。

還應用到了現代瀏覽器中都實現了的類 FileReader，它的實例的 readAsBinaryString 方法，用來讀取文件的原始二進制數據。

建立HTML部分並引入插件

<input type="file" id="file">
<script src="spark-md5.min.js"></script>

計算小文件的MD5值

document.querySelector('#file').addEventListener('change', e => {
  const file = e.target.files[0];
  const fileReader = new FileReader()
  fileReader.readAsBinaryString(file);
  fileReader.onload = e => {
    const md5 = SparkMD5.hashBinary(e.target.result);
    console.log(md5);
  }
});

首先獲取了上傳的文件，而後用前面提到的 FileReader 實例的 readAsBinaryString 方法讀取文件的二進制數據，當讀取完成後會觸發 onload 事件，用 e.target.result 獲取二進制數據，傳入SparkMD5 的 hashBinary 方法計算 MD5 值，打開控制檯，能夠看到計算出的最終 MD5 值：

計算大文件的MD5值
可是假設上傳的是一個大文件，受限於計算機性能的緣由，MD5 的計算速度就會大幅度下降。這時能夠將文件切分紅若干切片，分別計算 MD5 值，而後再組合起來。File 類從 BloB 類繼承了 slice 方法，能夠對文件進行切片處理。

document.querySelector('#file').addEventListener('change', e => {
  const file = e.target.files[0];
  const sliceLength = 10;
  const chunkSize = Math.ceil(file.size / sliceLength);
  const fileReader = new FileReader();
  const md5 = new SparkMD5();
  let index = 0;
  const loadFile = () => {
    const slice = file.slice(index, index + chunkSize);
    fileReader.readAsBinaryString(slice);
  }
  loadFile();
  fileReader.onload = e => {
    md5.appendBinary(e.target.result);
    if (index < file.size) {
      index += chunkSize;
      loadFile();
    } else {
      console.log(md5.end());
    }
  };
});

假設將文件切成10份，那麼每一份的大小就是 file.size / sliceLength ，首先建立 FileReader 和 SparkMD5 的實例。再對文件進行切片處理，並把切片傳入 FileReader 實例獲取二進制數據的方法 readAsBinaryString 中，讀取完成調用 SparkMD5 實例的 appendBinary 方法，即爲該切片的 MD5 。若是沒有讀取完成，則重複該讀取操做，直至最後一個切片讀取完成。讀取完成後調用 md5.end 方法，輸出最終的 MD5 值。打開控制檯查看：

與剛纔一次性讀取的 MD5 值相同。

當在開發過程當中若是須要計算文件的 MD5 值時，可根據文件大小選擇以上兩種方法中的某一個進行使用便可。

相關文章
Node.js計算文件的MD5值