element-ui 文件上傳修改文件名

技術背景

Vue + axios + element-ui

問題的產生

一個美好的週五，我正在愉快地打着代碼，忽然收到一封來自產品的神祕消息，線上活動出 BUG 了！吶尼！怎麼可能！必定是你的打開方式不對！打開消息截圖，線上的一個聊天室背景忽然變成了另外一張毫無關聯的圖（一個大大的太陽），我一看，這不是我剛剛上傳的一個圖嘛！爲何跑到那裏去了！

問題定位

咱們全部的靜態資源（好比圖片）都會上傳到一個服務器上，在活動中訪問時會統一訪問靜態資源服務器，而靜態資源上傳時並無處理重名問題！！！接口側僅僅是在前面加了一個4位數的隨機數，也就是說，當同名圖片超過 10000 張時，百分百會有圖片被覆蓋！！沒錯是直接覆蓋而不是報錯！即便不到10000張，同名數量越多，被覆蓋機率也就越高。

開始甩鍋

遇到問題不用慌！只要鍋甩的好，一切問題都不是問題！我直接找到後臺負責人，描述了一下狀況，只見他雲淡風輕地說了一句：這不是個人 KPI 。？？？我 ** 你個 xx，男人都是大豬蹄子！靠別人是不行了，只能靠本身，仍是本身搞一下吧。

嘗試偷懶

element-ui 屹立這麼多年，我相信它必定可以完成修改文件名的重任，因而滿懷期待地打開官方文檔，很好！不支持！如今是週五晚上六點半，很好，註定又不能好好吃飯了！

攔截文件上傳

文件對象（file）是不能直接修改文件名的，file.name 是隻讀屬性，若是你強行賦值，會直接報錯，因此只能攔截掉 element-ui -> uploader 的默認上傳行爲，改成本身上傳。下面爲核心 HTML 代碼，主要是利用 before-upload 事件來阻止上傳

<el-upload :before-upload="beforeUpload">
    <i class="el-icon-plus" />
</el-upload>
複製代碼

beforeUpload 代碼：既然 file.name 是隻讀屬性，那就只能新建一個 file 對象了。你不仁，就不要怪我不義了！新建的文件名爲時間戳 + 原文件名。

beforeUpload(file) {
    const timeStamp = new Date() - 0
    const copyFile = new File([file], `${timeStamp}_${file.name}`)
    this.uploadFile(copyFile)
    return false
}
複製代碼

uploadFile 代碼：構建一個 FormData 對象，僅此而已！

uploadFile(file) {
    const formdata = new FormData()
    formdata.append('lbf-file-upload', file)
    formdata.append('name', 'lbf-file-upload')
    formdata.append('_csrfToken', this.$ajax.getCsrfToken()._csrfToken)
    this.postForm(formdata)
}
複製代碼

postForm 代碼：利用 axios 庫上傳到服務器。

postForm(formdata) {
    this.$ajax.post('/xxx/ajax/general/file/files', formdata).then(res => {
        if (res.code == null || res.code === 0) {
            // do something
        } else {
            this.$message.error(res.msg || res.message || '文件上傳失敗')
        }
    }).catch((err) => {
        this.$message.error(err.message || '文件上傳失敗')
    })
}
複製代碼

就此搞定！之後全部的文件上傳都將自動帶上時間戳前綴，後臺4位隨機數機制 + 時間戳 + 文件名，要再想覆蓋，簡直難如程序員找女友！