記文件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爲何是同樣的這個問題，在遇到問題時必定不能想固然要去實踐，遇到問題，多換角度去思考，問題必定會解決。