在vue中获取文件的Md5值，以上传图片与视频为例

1. Md5 是什么？

• MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。用于加密数据。
• 原理：MD5码以512位分组来处理输入的信息，且每一分组又被划分为16个32位子分组，经过了一系列的处理后，算法的输出由四个32位分组组成，将这四个32位分组级联后将生成一个128位散列值。
  总体流程如下图所示，每次的运算都由前一轮的128位结果值和当前的512bit值进行运算
  

2. 使用插件spark-md5处理

• 安装

npm install --save spark-md5

• 哪里用哪里引入

import SparkMD5 from "spark-md5";

3. 获取图片文件的Md5值

• 这里的场景是后端需要文件唯一的MD5值，需要前端去计算。
• 后端处理会增加接口时间，同一个上传接口，其它地方又不需要。
• 代码如下：

<el-upload
   class="avatar-uploader"
   :on-preview="handlePictureCardPreview"
   :action="uploadImgUrl"
   :on-success="handleSuccess"
   :on-error="handleError"
   :on-change="fileChange"
   :accept="'.img,.png,.jpg,.jpeg'"
   :data="uploadImgData"
   multiple
 >
 </el-upload>

• 重点是 fileChange 方法，其余大家应该都看得懂。
• 在文件发生变动的时候，触发此方法。

    fileChange(file) {
      let fileReader = new FileReader();
      let Spark = new SparkMD5.ArrayBuffer();
      fileReader.readAsArrayBuffer(file.raw);
      fileReader.onload = function (e) {
        Spark.append(e.target.result);
        let md5 = Spark.end();
        console.log(md5);
      };
    },

• 当你上传文件的时候，在控制台发现了一串这样的字符，那就代表成功了。这就是此图片的唯一Md5值。
  

4. 视频文件的Md5值获取

• 这里是比较麻烦的，因为格式不一样，网上找了很多资料，都不太对，自己研究了一套。
• template 的代码和上面一样就行，不重新写了，我这里的场景是用的腾讯的视频插件 TXupload，播放加密的，会略有不同。
• 不过不用担心，下面会详细说明。
• 核心方法如下：

    async calculateMD5(file) {
      return new Promise((resolve, reject) => {
        const blobSlice =
          File.prototype.slice ||
          File.prototype.mozSlice ||
          File.prototype.webkitSlice;
        const chunkSize = 2097152; // 2MB chunks
        const chunks = Math.ceil(file.size / chunkSize);
        let currentChunk = 0;
        
        const spark = new SparkMD5.ArrayBuffer();
        const fileReader = new FileReader();

        fileReader.onload = function (e) {
          spark.append(e.target.result); // Append array buffer
          currentChunk++;
          if (currentChunk < chunks) {
            loadNext();
          } else {
            resolve(spark.end());
          }
        };
        fileReader.onerror = function () {
          reject("Error reading file");
        };
        function loadNext() {
          const start = currentChunk * chunkSize;
          const end =
            start + chunkSize >= file.size ? file.size : start + chunkSize;

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

• 此方法用于计算文件的MD5值。
• 需要注意的是，这个方法调用的时候一定要传一个文件格式进来！！！不管你用的是什么插件，都要确保是这种格式（File）
  
• 调用示例：

    async addFile(file) {
      const md5 = await this.calculateMD5(file[0].videoFile);
      console.log(md5);
    },

• 返回结果，是这样就代表没问题
  

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)