element-ui 文件上传组件添加 MD5编码参数

md5编码使用的依赖为 spark-md5.js
参考了csdn 上的一篇文章：基于vue框架下使用Element-UI获取文件MD5值并上传。下面的描述大部分都是相较于这篇文章来说的，没看懂我在说啥的朋友可以先参考下这篇文章。
在根据上面的文章实践的时候再根据element 官方文档上的描述，

on-change.png

个人感觉把逻辑代码放到change 钩子函数中不是很妥当，所以稍稍做了下改动。

async beforeUpload(file) {
  console.log(file)
  const _this = this
  var fileReader = new FileReader();
  var dataFile = file;
  let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
  var spark = new SparkMD5.ArrayBuffer();
    //获取文件二进制数据
  fileReader.readAsArrayBuffer(dataFile)
        // 下面要注意的是 fileReader.onload 回调方法是异步的，
    // 需要用到await 把它变成同步的，不然文件上传的时候是拿不到md5的值的
  await new Promise((resolve, reject) => {
    fileReader.onload = function(e) {
    spark.append(e.target.result.slice(0, 10 * 1024 * 1024));
    const md5 = spark.end()
    _this.formdata.md5 = md5
    resolve()
      }
  })
}

获取二进制数据并进行md5编码的代码基本是照抄，区别在于：

1.逻辑代码都放到了before-upload 这个钩子函数中而不是on-change
2.使用async await 的方式使 fileReader.onload 变为同步执行，方便组件自动提交的时候能正确获取到md5参数，去替换掉关闭组件的自动上传功能，然后再在钩子函数中触发提交的方案。