基于vue框架下使用Element-UI获取文件MD5值并上传

基于vue框架下使用Element-UI获取文件MD5值并上传

使用插件： spark-md5

.vue页面

<el-upload
	class="avatar-uploader idcard"
	:action="imgdataUploadUrl"
	ref="frontImg"
	:data="imgdata"
	:show-file-list="false"
	:auto-upload="false" 
	:on-success="handleAvatarSuccess"
	:before-upload="beforeImgUpload"
	:on-change="onFrontImgChange">
	<img v-if="persform.frontImg" :src='getimage(persform.frontImg)' class="avatar">
	<img v-else src="@/assets/Images/idcard1.png" class="avatar">
	<p style="margin:0" class="sp-99">正面</p>
</el-upload>

因为API接口上传需要文件的md5及后缀名，所以绑定:data = imgdata来携带请求参数。文件md5值在:on-change的钩子函数中获取并赋值到imgdata中。

标与之对应的.js文件

1. 引入 spark-md5，如果不频繁使用的话无需在main.js中使用

import SparkMD5 from 'spark-md5'

2. 利用element-ui上传组件中的on-change来监听文件，在文件发生改变时计算文件的md5值

onFrontImgChange:function(file, fileList){
	//console.log(file)
	const _this = this  
	var fileReader = new FileReader();
	//此处打印file可看到file下的raw为文件属性
	var dataFile = file.raw;
	let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
	var spark = new SparkMD5.ArrayBuffer();
	//获取文件二进制数据
	fileReader.readAsArrayBuffer(dataFile)

	//异步执行函数
	fileReader.onload = function(e){
	spark.append(e.target.result);
	var md5 = spark.end()
	console.log(md5)
	//此处this指向发生改变，需提前声明const _this = this
	_this.imgdata.md5 = md5; //此处是将文件的md5值放入imgdata中
	//上传图片，如手动上传可不在此处执行
	_this.upload('frontImg')
	}
},

打印lile:
此处需要注意的是fileReader.onload为异步执行函数，如果上传设置的是自动上传的话需要在.vue文件的<el-upload>中设置禁用自动上传，然后在fileReader.onload函数中执行异步操作后调用自定义上传函数upload，在外部调用的话imgdata属性中无md5值。手动点击上传就无需考虑了。

upload函数 obj为<el-upload>插件中绑定的ref属性

//文件上传触发函数
upload:function(obj){
    this.$refs[obj].submit();
},

附加说明

网上有些方法基本思路与上述方法一致，但需要注意的是有些在获取文件二进制数据时用的是fileReader.readAsBinaryString

onFrontImgChange:function(file, fileList){
	const _this = this  //this指向问题
	var fileReader = new FileReader();
	var dataFile = file.raw;
	//console.log(file)
	let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
	var spark = new SparkMD5;
	fileReader.readAsBinaryString(dataFile)

	//异步执行函数
	fileReader.onload = function(e){
	spark.appendBinary(e.target.result);
	var md5 = spark.end()
	//console.log(md5)
	_this.imgdata.md5 = md5;
	_this.upload('frontImg')
	}
},

此方法也可获取文件的md5值，但是fileReader.readAsBinaryString方法在17年就已废除，在IE上或报错对象不支持“fileReader.readAsBinaryString”属性或方法。所以如果要考虑IE兼容的话尽量使用readAsArrayBuffer

同时请注意两种方法的不同部分代码需要修改，比较上述代码便知。