這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用element-ui 怎么上傳文件并修改文件名，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在丘北等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供網(wǎng)站建設(shè)、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需搭建網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),全網(wǎng)營(yíng)銷(xiāo)推廣,外貿(mào)網(wǎng)站制作,丘北網(wǎng)站建設(shè)費(fèi)用合理。

技術(shù)背景

Vue + axios + element-ui

問(wèn)題的產(chǎn)生

一個(gè)美好的周五，我正在愉快地打著代碼，突然收到一封來(lái)自產(chǎn)品的神秘消息，線上活動(dòng)出 BUG 了！吶尼！怎么可能！一定是你的打開(kāi)方式不對(duì)！打開(kāi)消息截圖，線上的一個(gè)聊天室背景突然變成了另一張毫無(wú)關(guān)聯(lián)的圖（一個(gè)大大的太陽(yáng)），我一看，這不是我剛剛上傳的一個(gè)圖嘛！為什么跑到那里去了！

問(wèn)題定位

我們所有的靜態(tài)資源（比如圖片）都會(huì)上傳到一個(gè)服務(wù)器上，在活動(dòng)中訪問(wèn)時(shí)會(huì)統(tǒng)一訪問(wèn)靜態(tài)資源服務(wù)器，而靜態(tài)資源上傳時(shí)并沒(méi)有處理重名問(wèn)題?。?！接口側(cè)僅僅是在前面加了一個(gè)4位數(shù)的隨機(jī)數(shù)，也就是說(shuō)，當(dāng)同名圖片超過(guò) 10000 張時(shí)，百分百會(huì)有圖片被覆蓋??！沒(méi)錯(cuò)是直接覆蓋而不是報(bào)錯(cuò)！即使不到10000張，同名數(shù)量越多，被覆蓋概率也就越高。

開(kāi)始甩鍋

遇到問(wèn)題不用慌！只要鍋甩的好，一切問(wèn)題都不是問(wèn)題！我直接找到后臺(tái)負(fù)責(zé)人，描述了一下情況，只見(jiàn)他云淡風(fēng)輕地說(shuō)了一句：這不是我的 KPI 。？？？我 ** 你個(gè) xx，男人都是大豬蹄子！靠別人是不行了，只能靠自己，還是自己搞一下吧。

嘗試偷懶

element-ui 屹立這么多年，我相信它一定能夠完成修改文件名的重任，于是滿(mǎn)懷期待地打開(kāi)官方文檔，很好！不支持！現(xiàn)在是周五晚上六點(diǎn)半，很好，注定又不能好好吃飯了！

攔截文件上傳

文件對(duì)象（file）是不能直接修改文件名的，file.name 是只讀屬性，如果你強(qiáng)行賦值，會(huì)直接報(bào)錯(cuò)，所以只能攔截掉 element-ui -> uploader 的默認(rèn)上傳行為，改為自己上傳。下面為核心 HTML 代碼，主要是利用 before-upload 事件來(lái)阻止上傳

<el-upload :before-upload="beforeUpload">
  <i class="el-icon-plus" />
</el-upload>

beforeUpload 代碼：既然 file.name 是只讀屬性，那就只能新建一個(gè) file 對(duì)象了。你不仁，就不要怪我不義了！新建的文件名為時(shí)間戳 + 原文件名。

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

uploadFile 代碼：構(gòu)建一個(gè) FormData 對(duì)象，僅此而已！

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 庫(kù)上傳到服務(wù)器。

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 怎么上傳文件并修改文件名了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：使用element-ui怎么上傳文件并修改文件名-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://jinyejixie.com/article2/dhocic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、靜態(tài)網(wǎng)站、外貿(mào)建站、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)