vue3前端获取文件md5码

1 首先安装 spark-md5

1. 通过npm安装，命令 npm i spark-md5 --save
2. 或者通过cdn导入

2 代码部分

1. 这里是通过 on-change 出发事件，其他钩子同理。

<template>
	<el-upload
        drag
        action="a"
        :limit="1"
        :on-change="ReadFileMD5"
        :http-request="UploadSceneModel"
		:auto-upload="false"
    >
    <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
</template>

<script>
// 这里是vite 创建得 vue3 导入SparkMD5  vue2用require导入
import SparkMD5 from 'spark-md5'

export default {
	methods: {
		ReadFileMD5(param){
			const file = param.raw;
            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
                {
                	// md5.end() 就是文件md5码
                    console.log(md5.end());
                }
            }
		}
	}
}
</script>