Vue.js Element-UI和axios文件上传导致页面刷新

Question

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)
    })
})

Answer 1

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

Answer 2

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()