页面代码
<template> <div class="hello"> <el-input type="file" id="file" @change="dddd" ref="aaa" v-model="fileslist"></el-input> </div> </template>
js代码:
<script> export default { data () { return { fileslist:"" } }, methods: { dddd(e){ // 取出input中的files const { files } = this.$refs.aaa.$refs.input; // 创建一个新的url对象 let src = window.URL.createObjectURL(files[0]) // 实例一个读取文件的方法 let a = new FileReader() // readAsArrayBuffer(文件)获取图像 a.readAsArrayBuffer(files[0]) // 获取完文件后执行 a.onload = (r)=>{ // 拿到Int8格式的编译码 var arr = new Int8Array(a.result) // 取文件编译码的前十位 var arr1 = arr.subarray(0, 10); // 取文件编译码的后十位 var arr2 = arr.subarray(arr.length-11, arr.length-1); // 拼接前十位和后十位,和文件大小转成字符串 let val = arr1.join('')+arr2.join('')+files[0].size // 生成md5码 console.log(md5(val)) } } }, mounted(){ } } </script>
技术点:
FileReader()读取文件:
reader.readAsArrayBuffer(files[0]),读取大文件的时候使用,获取到四种编码格式
reader.readAsText(files[0],"utf8"),读取utf8格式的文件内容
reader.readAsDataURL(files[0])
const img = new Image()
img.src = reader.result ,读取图片格式src
获取出编码格式:
用readAsArrayBuffer方法获取出来的编码格式有:
Int8Array
Uint8Array
Int16Array
Int32Array
生成md5加密需要引入:
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
在页面上就能直接引入
md5(val)