Vue3+Axios+FormData上传文件页面刷新，求Laravel后端替代方案

一、解决页面自动刷新问题 #

页面刷新的核心原因是表单默认提交行为未被完全阻止，以及Cancel按钮的默认类型触发了表单提交，按以下步骤修复：

1. 修正Cancel按钮的类型
   你的Cancel按钮未指定type，默认会被识别为submit类型，点击时会触发表单提交导致刷新。给按钮加上type="button"：

   <Button
     color="secondary"
     variant="tonal"
     type="button"
   >
     Cancel
   </Button>
   

2. 确认表单提交阻止逻辑生效
   检查你的onSubmit函数是否正确实现，确保没有手动触发页面刷新的代码，示例如下：

   const onSubmit = () => {
     if (!file.value) return; // 先判断文件是否存在
     
     const fdata = new FormData()
     fdata.append('file', file.value)
     
     axios.post('/import', fdata) // 路径建议加根斜杠，避免相对路径问题
       .then(res => {
         // 处理上传成功逻辑
       })
       .catch(err => {
         // 处理上传错误逻辑
       })
   }
   

   同时确认表单的@submit.prevent绑定无拼写错误，比如：

   <form @submit.prevent="onSubmit">
   

二、解决文件参数为空对象的问题 #

直接传递{file: file.value}无法正确上传文件，原因是：
Axios默认以application/json格式发送数据，而File对象无法被JSON序列化，后端自然只能拿到空对象。

正确的方式就是使用FormData，这是浏览器传递文件的标准方案，无需修改Vite配置，只要确保：

• 不要手动给Axios请求设置Content-Type，Axios会自动识别FormData并设置正确的multipart/form-data请求头
• 后端Laravel中正常接收文件即可，示例控制器代码：

  public function import(Request $request)
  {
      if ($request->hasFile('file') && $request->file('file')->isValid()) {
          $uploadedFile = $request->file('file');
          // 执行文件处理逻辑，比如保存到存储
          // $uploadedFile->store('uploads');
      }
      return response()->json(['status' => 'success']);
  }
  

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