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

使用插件： spark-md5

.vue页面

<el-uploadclass="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文件

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

import SparkMD5 from 'spark-md5'

利用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.webkitSlicevar 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.webkitSlicevar 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

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