使用FormData上传文件时页面自动刷新，@click.prevent无效的技术求助

问题排查与解决方案 #

1. 检查未阻止默认提交的表单标签

你的代码未展示完整结构，但如果<VFileInput>被包裹在原生<form>或Vuetify的<v-form>组件内，即便按钮加了@click.prevent，表单的默认提交行为仍会触发页面刷新。

解决办法：

• 若使用原生<form>，直接给它添加@submit.prevent：

<form @submit.prevent>
  <!-- 你的文件输入框与按钮代码 -->
</form>

• 或者直接移除<form>标签——你已经用Axios手动提交数据，原生表单的默认提交功能完全不需要。

2. 确认按钮事件绑定的写法

你的按钮写法@click.prevent="submitForm()"本身没问题，也可以简化为@click.prevent="submitForm"（去掉括号不影响方法执行），但这不是导致页面刷新的核心原因。

3. 排查Axios请求中的意外刷新逻辑

检查submitForm方法，确保没有调用location.reload()、window.location.href这类会触发页面刷新的代码（你的当前代码里没有，但后续改动时要留意）。

4. 适配Vuetify表单体系（可选）

如果用Vuetify的表单组件，建议用<v-form>包裹内容，绑定@submit.prevent到提交方法，同时按钮设置type="submit"，更贴合框架逻辑：

<v-form @submit.prevent="submitForm">
  <VCol cols="6" sm="12">
    <VFileInput ref="fileInput" show-size multiple label="Upload file" :rules="rules" />
  </VCol>
  <VCardActions>
    <VSpacer />
    <VBtn color="blue-darken-1" variant="text" @click="dialog = false, errors = null">
      Close
    </VBtn>
    <VBtn color="blue-darken-1" variant="text" type="submit">
      Submit
    </VBtn>
  </VCardActions>
</v-form>

总结 #

绝大多数情况下，页面自动刷新都是表单默认提交行为未被阻止导致的，优先检查是否存在<form>或<v-form>标签，给它们加上@submit.prevent就能解决问题。

内容的提问来源于stack exchange，提问作者Khaled Tarek