vue上传文件并计算为md5值进行base64编码+原生js实现ajax请求（携带请求头）

vue上传文件并计算为md5值进行base64编码+原生js实现ajax请求（携带请求头）

Vue+js+md5+base64上传文件并计算md5值进行base64编码

//1、运行如下命令
npm install --save js-base64
npm install --save js-md5
//2、在项目文件中引入
let Base64 = require('js-base64').Base64
//在需要使用的项目文件中引入：
import md5 from 'js-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:"",
      bas64:'',//用于存放编码
	  res:'',//用于存放文件名
	  size:'',//文件大小
    }
  },
methods:{
	dddd(e){
			let inputDOM = this.$refs.aaa.$refs.input;
			this.file = inputDOM.files[0];// 通过DOM取文件数据
			this.size = Math.floor(this.file.size / 1024);//计算文件的大小
			console.log("文件大小"+this.size)//文件大小 　
			// 取出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))
				// 对该md5值进行base64编码
				this.bas64 = Base64.encode(md5(val))
				console.log("bas64==="+this.bas64)
				console.log("文件名"+this.fileslist)
				var res = this.fileslist.split('\\')
				this.res = res[res.length-1]
				console.log(this.res)
			}
		}
	}
}
</script>

吃水不忘挖井人

vue中读取文件编码格式并进行md5加密
vue中使用Base64编码和解码
原生js实现ajax请求（带请求头header）和数据传参过程代码