记文件md5文件名上传七牛云

之前写过一篇记录用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为什么是一样的这个问题，在遇到问题时一定不能想当然要去实践，遇到问题，多换角度去思考，问题一定会解决。

转载于:https://juejin.im/post/5ce11d9851882525c53b2221