Element組件Upload修改上傳文件名

目錄

• 1，前言
• 2，問題定位
• 3，實現
  • 3.1，before-upload回調
  • 3.2，自定義上傳

1，前言

---

事情的起因是我的leader告訴我系統的合同上傳出現問題了，文件上傳失敗，接口也沒調用。我看了一下時間，17:15了，還有45分鍾就要關機回家了，嚇得我趕緊定位問題。

2，問題定位

---

公司的上傳是用的emelent-ui的Upload二次封裝，找到了組件源碼(不是俺封裝的)，看了一下邏輯，發現問題出在后綴名上。客戶上傳的文件后綴是.PDF，而組件中未兼容大小寫，在before-upload事件中就阻止了。於是我放開了大寫后綴，哦豁，文件上傳接口居然也不支持大寫，跑去問后端，告訴我要統一小寫，不能放開大寫。沒辦法，那就自己修改一下吧。

3，實現

---

發現Upload中，在before-upload直接修改file是不行的，因為是只讀屬性。所以我采用了手動上傳

3.1，before-upload回調

在回調中，我們可以拿到file參數，這個就是我們上傳的文件，定義一個變量nama，值為toLowerCase轉換成小寫的文件名，通過new File創建一個file對象，名字就是轉換后的name

// 上傳之前的回調
handleBeforeUpload(file) {
    const littleName = file.name.toLowerCase()
    const copyFile = new File([file], littleName)
    this.handlePddUploadFile(copyFile)
    return false
  }
}

3.2，自定義上傳

這里我們新建一個form對象，攜帶我們的額外參數

// 自定義的上傳form
handlePddUploadFile(copyFile) {
  const formdata = new FormData()
  formdata.append('file', copyFile)
  formdata.append('save_org_name', this.data.save_org_name)
  formdata.append('behavior', this.data.behavior)
  formdata.append('uploadFile', this.data.uploadFile)
  formdata.append('safe', this.data.safe)
  this.handlePddPostForm(formdata)
}

然后調用axios實現上傳

async handlePddPostForm(formdata) {
  try{
    const res = await axios.post(this.action, formdata, {
      headers: this.headers
    })
    this.handleUploadSuccess(res.data)
  } catch (error) {
    Top.alert(error)
  }
}

---

如果看了覺得有幫助的，我是@上進的鵬多多，歡迎 點贊 關注 評論；END

---

PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦

---

公眾號

往期文章

• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細！Vue-Router手把手教程
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令
• 微信小程序實現搜索關鍵詞高亮
• 超詳細！Vue的九種通信方式
• 超詳細！Vuex手把手教程

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金