1, the preface

---

The cause was that my leader told me that there was something wrong with the contract uploading of the system. The file uploading failed and the interface was not called. I looked at the time, 17:15, there are 45 minutes to power off home, scared ME to quickly locate the problem.

2. Problem location

---

The Upload of the company used the second packaging of Emelent-UI Upload, found the source code of the component (not packaged by me), looked at the logic, and found the problem was in the suffix name. The file suffix uploaded by the customer is. PDF, which is not case-compatible in the component, is blocked in the before-upload event. So I let go of uppercase suffixes, oh no, file upload interface unexpectedly also does not support uppercase, ran to ask back end, told me to unify lowercase, can not let go of uppercase suffixes. No way, then modify it yourself.

3, the realization of

---

The Upload file is read-only and cannot be modified before- Upload. So I used manual uploading

3.1, before-upload callback

In the callback, we can take the file argument, which is the file we uploaded, define a variable nama with the value toLowerCase converted to a lowercase file name, and create a file object with the converted name through new File

// Callback before upload
handleBeforeUpload(file) {
    const littleName = file.name.toLowerCase()
    const copyFile = new File([file], littleName)
    this.handlePddUploadFile(copyFile)
    return false}}Copy the code

3.2. Custom upload

Here we create a new Form object with our extra parameters

// Upload a custom 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)
}
Copy the code

Then call Axios for the upload

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

---

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

PS: on this page press F12, input document. In the console querySelectorAll (‘ like – BTN ‘) [0]. Click (), a surprise

The articles

• Use NVM to manage node.js version and change NPM Taobao image source
• More detailed! Vue’s nine ways of communication
• Wechat small program to achieve search keyword highlighting
• Env files are used in vUE to store global environment variables and configure vUE startup and package commands
• More detailed! Vuex hands-on tutorials

Personal home page

• CSDN
• GitHub
• Jane’s book
• Blog garden
• The Denver nuggets