TS JS Vue开发者必学技巧：一文教你快速安装和使用spark-md5

ts js vue 验证文件 MD5 值 spark-md5

如何在前端中验证要上传的文件的 md5 值

一、安装 spark-md5 插件

需要用到 spark-md5 这个插件

官方 github：

yarnadd spark-md5
//  或
npm i spark-md5

使用的时候引入：

import SparkMD5 from "spark-md5";

二、封装成一个方法

要验证文件的 md5 ，官方的文档里就有这个例子，直接照抄它，我封装了下，封成了一个返回 Promise 的方法。如下：

这是一个 TS 版本的，改成 js 只需要将入口处的文件类型定义去除就可以了
function generateMD5OfFile(file) {

import SparkMD5 from"spark-md5";/**
 * 生成一个文件的 MD5 值
 * @param file File
 */functiongenerateMD5OfFile(file: File):Promise<string>{returnnewPromise((resolve, reject)=>{let 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 =newSparkMD5.ArrayBuffer(),
            fileReader =newFileReader();
        fileReader.onload=function(e){console.log('read chunk nr', currentChunk +1,'of', chunks);
            spark.append(e.target.result);// Append array buffer
            currentChunk++;if(currentChunk < chunks){loadNext();}else{resolve(spark.end())console.log('finished loading');console.info('computed hash', spark.end());// Compute hash}};
        fileReader.onerror=function(){console.warn('oops, something went wrong.');reject('MD5 calc error')};functionloadNext(){let start = currentChunk * chunkSize,
                end =((start + chunkSize)>= file.size)? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));}loadNext();})}

三、使用它

如何使用，你可以将这个方法，下面是大体的内容，不全，但能表达具体操作过程了。

<el-form-itemlabel="升级文件"><el-uploadref="refFormBoxUpdate"class="upload-demo"action="null":limit="10":auto-upload="false":on-change="handleChange":on-remove="handleRemove":multiple="false"><el-buttonsize="default"type="primary"icon="Files">选择云盒升级文件</el-button></el-upload></el-form-item><el-form-itemlabel="MD5"prop="md5"><el-inputv-model.trim="formBoxUpgrade.md5"placeholder="请输入文件验证 MD5"/></el-form-item><scriptsetuplang="ts">import{generateMD5OfFile}from"@/utility.ts";const refUpload =ref()consthandleRemove: UploadProps['onRemove']=(file, uploadFiles)=>{
    console.log(file, uploadFiles)}consthandleChange: UploadProps['onChange']=(file, uploadFiles)=>{
    console.log(file, uploadFiles)
    formBoxUpgrade.value.file = file.raw
    if(file.raw){// 当文件变化时，直接用它生成 md5generateMD5OfFile(file.raw).then(res=>{
                formBoxUpgrade.value.md5 = res
            })}}</script>

四、结果