之前写过一篇记录用elementui upload组件上传文件。这次为了节省七牛云空间，使用对文件md5后上传的方式。猜测会报文件重复或者更新文件。 elementui upload组件 上传视频到七牛云
首先我们项目引入md5插件
npm install --save js-md5
文件中引入
const md5 = require('md5')
想到upload组件我们使用的beforeAvatarUpload函数中可以拿到文件，直接md5，搞定收工。
呵呵呵，怎么可能这么简单，肯定有大坑再里面，后面就不用写了/(ㄒoㄒ)/~~
对beforeAvatarUpload文件进行md5后，能出现数字值，当上传其他文件的时候，七牛云会报614错误，就是文件重复上传。但是我们上传的文件是不同的文件，但是md5后的值都一样。考虑可能是beforeAvatarUpload拿到的file有问题，又重复尝试其他函数里拿file，结果都是一样。那么问题就出现了，到底是什么情况呢？
想了很久，考虑可能从函数中拿到的file只是一个文件的对象不是真正的文件流，所以我们需要使用FileReader。最终发现可行：
const readFileMd5 = file => {
let fileReader = new FileReader()
fileReader.readAsBinaryString(file)
return new Promise((resolve, reject) => {
try {
fileReader.onload = e => {
const md5Key = md5(e.target.result)
resolve(md5Key)
}
} catch (error) {
reject(error)
}
})
}
封装成了一个函数，方便其他地方使用
const key = await readFileMd5(file)
搞定收工。
虽然这里看似解决的快速，但实际开发中花费了很多时间找md5为什么是一样的这个问题，在遇到问题时一定不能想当然要去实践，遇到问题，多换角度去思考，问题一定会解决。
