1.先下载
npm i browser-md5-file -S
2.在使用的vue页面引入和声明方法
import BMF from 'browser-md5-file'
const bmf = new BMF()
3.使用方法:
function handle(e) {
const file = e.target.files[0];
bmf.md5(
file,
(err, md5) => {
console.log('err:', err);
console.log('md5 string:', md5); // 97027eb624f85892c69c4bcec8ab0f11
},
progress => {
console.log('progress number:', progress);
},
);
}
4.终止md5计算方法(大文件计算很费时 ):
bmf.abort()
5.代码可以直接复制使用:
<template>
<div>
<!-- 上传文件 -->
<!-- multiple 选择多个文件属性 -->
<input type="file" placeholder-class="input-placeholder" @change="handle">
</div>
</template>
<script>
// 先下载 npm i browser-md5-file -S
import BMF from 'browser-md5-file'
const bmf = new BMF()
export default {
data () {
return {}
},
methods: {
handle (e) {
// console.log(e)
const file = e.target.files[0]
// console.log(file)
bmf.md5(
file,
(err, md5) => {
console.log('err:', err)
console.log('md5 string:', md5) // 97027eb624f85892c69c4bcec8ab0f11
// const formData = new FormData() // 每次失败要重置formdata对象
// formData.append('file', e.target.files[0])//文件掉接口方式
// You can abort it before success to md5:中止计算md5--大文件计算很费时
// bmf.abort()
},
progress => {
console.log('progress number:', progress)
}
)
}
}
}
</script>
<style></style>