0

I am using the element-ui file upload component(https://element.eleme.io/#/en-US/component/upload) to handle the frontend of image uploading. everything is working perfectly(file is sent to the server etc). However for some strange reason after the the axios's successful response code executes, the page refreshes automatically. I have tried sending the same post request without the file and the page doesnt automatically refresh.

The submit button type is set to "button" so that is not the issue in this case.

Code for axios post request: 

base.post('/add/visit/', formData,   {headers: {'Authorization' : 'Bearer ' + localStorage.getItem('token') ,'Content-Type': 'multipart/form-data'}})

    .then(response => {
      console.log(response);
      resolve(response)
    })
    .catch(err => {
      console.log(err)
      reject(err)
    })
})
user3473184
  • 23
  • 1
  • 6
  • Did you inspect the network in devtools? What status code do for your file upload? Are you getting redirection? Look into [this question and answers](https://stackoverflow.com/questions/46004103/how-do-i-determine-the-status-code-of-a-fetch-request/46031800#46031800), maybe it will help – ljubadr Sep 10 '19 at 20:24

2 Answers2

0

I wonder if it has a default behavior like a form submit happening. If there were no href property it would reload the page. Is there an event you can tap into like onClick(e)? Then in the function that handles it do e.preventDefault();

https://www.w3schools.com/jsref/event_preventdefault.asp

banderson
  • 121
  • 6
0

Element-ui upload can upload the file for you, then there is no page refresh:

el-upload(:action="formUploadLocation" :data="form" :auto-upload="false" ref="upload" :file-list="list"
          :on-success="handleSucces" :on-error="handleFail"

Then the upload in the form submit (only when :auto-upload=false):

this.$refs.upload.submit()
dreijntjens
  • 4,577
  • 26
  • 28
  • This is what im using: ` ` Then iget the file data from the array and send it via my axios request so the upload isnt being handled by element ui. Thanks for your input though. – user3473184 Sep 15 '19 at 15:38