二进制流转MD5

前言

源于文件上传,需要校验是否上传的是,同一个文件 为了确保上传的是指定文件 可在上传到服务器或者oss前,前端将本地文件加密生成MD5值

前端处理

  npm install --save spark-md5  //下载

包装工具函数

此部分单独抽离出来,方便后续其他地方使用

let SparkMD5 = require("spark-md5");

SparkMD5.file = function(file, callback) {
  if (typeof file === "string") {
    var request = new XMLHttpRequest();

    request.open("GET", file, true);
    request.responseType = "blob";
    request.onload = function(e) {
      if (e.target.status == 200) {
        SparkMD5.file(request.response, callback);
      } else {
        console.error(e);
        callback(null);
      }
    };
    request.onerror = function(e) {
      console.error(e);
      callback(null);
    };
    request.send();
    return;
  }
  var blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice,
    chunkSize = 2097152, // Read in chunks of 2MB
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,
    spark = new SparkMD5.ArrayBuffer(),
    fileReader = new FileReader();

  fileReader.onload = function(e) {
    spark.append(e.target.result);
    currentChunk++;

    if (currentChunk < chunks) {
      loadNext();
    } else {
      callback(spark.end());
    }
  };

  fileReader.onerror = function() {
    console.error("文件读取失败");
    callback(null);
  };

  function loadNext() {
    var start = currentChunk * chunkSize,
      end = start + chunkSize >= file.size ? file.size : start + chunkSize;

    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  }

  loadNext();
};
module.exports = SparkMD5;

使用

在上传组件的文件下,以element的el-upload为例,在beforeUpload钩子函数中调用

import SparkMD5 from "./SparkMD5";

//el-upload

beforeUpload(file){
  let _md5Code;
      SparkMD5.file(file, function(md5) {
        _md5Code = md5;  //此处可以拿到加密后的MD5
      });
}

后记

拿到MD5值即可进行比对,进行相应的处理

后端处理

如果是后端处理,前端就不用管了