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

【问题标题】：Vue.js Element-UI and axios file upload causing page refreshVue.js Element-UI 和 axios 文件上传导致页面刷新
【发布时间】：2020-01-12 14:39:09
【问题描述】：

我正在使用 element-ui 文件上传组件（https://element.eleme.io/#/en-US/component/upload）来处理图片上传的前端。一切正常（文件发送到服务器等）。但是由于某些奇怪的原因，在 axios 的成功响应代码执行后，页面会自动刷新。我已经尝试发送相同的 post 请求，但没有文件并且页面不会自动刷新。

提交按钮类型设置为“按钮”，因此在这种情况下这不是问题。

axios post 请求代码：

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

【问题讨论】：

您是否在 devtools 中检查了网络？您的文件上传有什么状态码？你得到重定向了吗？看看this question and answers，也许会有帮助

标签： javascript vue.js refresh element-ui

【解决方案1】：

element-ui上传可以为你上传文件，然后就没有页面刷新了：

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

然后在表单中上传提交（仅当:auto-upload=false时）：

this.$refs.upload.submit()

【讨论】：

这是我使用的：` ` 然后从数组并通过我的 axios 请求发送它，因此上传不是由元素 ui 处理的。不过感谢您的意见。

【解决方案2】：

我想知道它是否有一个默认行为，比如发生表单提交。如果没有 href 属性，它将重新加载页面。有没有可以像 onClick(e) 这样的事件？然后在处理它的函数中执行 e.preventDefault();

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

【讨论】：