Vue通过Axios上传文件到Laravel后端时FormData始终为空

你遇到的后端拿不到上传文件的问题，核心原因是手动硬编码设置了Content-Type: multipart/form-data请求头：

• 当你向axios传递FormData实例作为请求体时，浏览器会自动将请求头设置为multipart/form-data，同时自动生成唯一的boundary分隔符拼接在头信息中，后端依靠这个分隔符才能正确拆分请求体里的普通字段、文件内容。
• 手动写死Content-Type: multipart/form-data会覆盖浏览器自动生成的带boundary的合法头，后端收到请求后找不到分隔标识，无法解析请求体内容，自然拿不到上传的文件。
• 额外的代码问题：你的后端控制器里写了两行return，第一行return执行后，后面调用上传逻辑的代码永远不会生效。

• 删除前端代码里手动设置的Content-Type请求头，让浏览器自动生成符合规范的请求头即可。

  如果你在axios全局拦截器里统一设置了Content-Type: application/json，针对FormData的上传请求也不要手动指定头，直接传FormData实例，axios会自动识别类型调整头信息。如果拦截器里写了统一JSON序列化请求体的逻辑，要加判断：当请求体是FormData实例时，直接返回原对象不做序列化。

• 修正后端控制器里多余的return语句，保证上传逻辑能正常执行。
• 核对路由配置，确保test-file-uploads路由允许POST请求，前后端分离部署时确认跨域配置没有拦截上传请求。

前端Vue部分 #

<template>
<div>
    <input type="file" @change="uploadFile" ref="file">
    <button @click="submitFile">Upload!</button>
</div>
</template>

uploadFile(){
  // 获取选中的文件对象
  this.Images = this.$refs.file.files[0];
  const formData = new FormData();
  formData.append('file', this.Images);
  // 移除手动设置的headers，不要自定义Content-Type
  axios.post(`${this.baseUrl}test-file-uploads`, formData)
    .then((res) => {
      console.log('返回结果', res.data);
      console.log('请求状态', res.status);
    });
}

后端Laravel部分 #

public function testUploads(Request $request){    
    // 先校验文件是否上传成功
    if (!$request->hasFile('file') || !$request->file('file')->isValid()) {
        return response()->json(['message' => '未接收到有效上传文件'], 400);
    }
    // 校验通过后再执行后续文件存储逻辑
    return $this->uploadFiles($request, 108, 'props_and_set');
}

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