vue中读取文件编码格式并进行md5加密

页面代码

<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)