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)