使用element-ui 怎么上傳文件并修改文件名

這期內容當中小編將會給大家帶來有關使用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 || '文件上傳失敗')
  })
}

上述就是小編為大家分享的使用element-ui 怎么上傳文件并修改文件名了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。