Vue 页面中使用 ElementUI 实现一个上传，上传之前先计算一下文件的哈希（MD5）值，然后调用后端接口查看文件在服务器中是否存在，如果没有文件哈希记录，上传文件；如果存在，只修改数据库记录，不进行实际文件上传。
前端在浏览器中实现对文件操作，不像后端用个现成的工具包，两三行代码就可以搞定，实现思路是通过 FileReader 把文件读取到内存，获取文件二进制，再进行 md5 加密。
这里的功能实现使用 js-spark-md5 包，据说使用了世界上最快的 md5 算法，官方提供的例子以及文档很详细。
使用 Vue ElementUI 实现有个坑需要注意一下
on-change 事件中的获取 file 对象不能直接在 blobSlice.call() 中使用，需要使用 file 的原生对象，否则会导致 illegal invocation 错误
ElementUI on-change 事件函数中获取的 File 对象，下面还有一个 raw 属性对象，功能实现使用 raw 对象
具体实现代码如下：
template
<el-form-item label="上传数据" prop="uploadData"> <el-upload class="upload-demo" ref="upload" drag :action="uploadAction" :data="ruleForm.uploadData" :on-change="onFileChange" :on-success="onUploadSuccess" :on-error="onUploadError" :auto-upload="false" :file-list="fileList" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip line-height-none" slot="tip">只能上传csv文件，且最大不能超过10G</div> </el-upload> </el-form-item>
script
import SparkMD5 from 'spark-md5' ... methods: { onFileChange (file, fileList) { // element 中组件对 file 进行加工，这里使用未加工的对象，只有未加工的对象才能在 blobSlice.call() 中正常操作 let fileRaw = file.raw this.fileName = file.name let arr = file.name.split('.') if (arr && arr.length > 1) { let suffixName = arr[arr.length - 1].toLowerCase() if (suffixName !== 'csv') { this.$message.error('文件类型错误，请重新上传！') let index = this.fileList - 1 this.fileList.splice(index, 1) return false } } let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice let fileReader = new FileReader() let chunkSize = 2097152 let chunks = Math.ceil(file.size / chunkSize) let currentChunk = 0 let spark = new SparkMD5() fileReader.onload = function (e) { spark.append(e.target.result) currentChunk++ if (currentChunk < chunks) { loadNext() } else { console.log('computed hash', spark.end()) } } fileReader.onerror = function () { console.warn('FileReader error.') } function loadNext () { let start = currentChunk * chunkSize let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize // 注意这里的 fileRaw fileReader.readAsArrayBuffer(blobSlice.call(fileRaw, start, end)) } loadNext() } ...
关于 spark.end() 使用时要注意一下， 只能使用一次. 第一次调用后再次调用 spark.end() 后面的值都是有问题的。
如使用 console.log('computed hash', spark.end()) 语句执行结束后，再次执行 let result = spark.end() 获取值这时候得到的 value 是不对的， 总是会得到这样一个值 d41d8cd98f00b204e9800998ecf8427e
