vue3前端获取文件md5码
1 首先安装 spark-md5通过npm安装,命令npm i spark-md5 --save或者通过cdn导入2 代码部分这里是通过 on-change 出发事件,其他钩子同理。<template><el-uploaddragaction="a":limit="1":on-change="ReadFileMD5":http-request="UploadSceneMod
·
1 首先安装 spark-md5
- 通过npm安装,命令 npm i spark-md5 --save
- 或者通过cdn导入
2 代码部分
- 这里是通过 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>
更多推荐
已为社区贡献2条内容
所有评论(0)