Vue提交FormData的PUT请求，Laravel后端无法读取数据

核心原因 #

Laravel默认无法直接解析PUT/PATCH方法的multipart/form-data请求（浏览器原生不支持PUT方法上传文件），且你之前尝试的请求伪造方式错误——不能将FormData嵌套在普通对象中发送，否则会导致数据序列化异常。

解决方案 #

1. 修改前端请求代码

直接将_method字段添加到FormData中，用POST请求模拟PUT：

async update(vehicleId, data) {
  try {
    let formData = new FormData();
    // 添加PUT请求伪造字段
    formData.append('_method', 'PUT');
    // 追加文件
    (data.files ?? []).forEach((file) => {
      formData.append("files[]", file);
    });
    // 追加其他非空字段
    Object.entries(data).forEach(([key, value]) => {
      if (key !== "files" && value !== null) formData.append(key, value);
    });
    // 发送POST请求
    const response = await http.post(
      `api/v1/vehicles/${vehicleId}`,
      formData
    );
    return Promise.resolve(response.data);
  } catch (err) {
    return Promise.reject(err);
  }
},

2. 确保后端路由配置正确

路由需定义为PUT/PATCH方法（Laravel会自动识别_method字段并处理为PUT请求）：

// api.php
Route::put('/v1/vehicles/{vehicle}', [VehicleController::class, 'update']);

3. 后端正常获取数据

直接通过Request实例获取字段和文件：

public function update(Request $request, $vehicleId)
{
    // 获取普通字段
    $basicData = $request->except('files');
    // 获取上传的文件数组
    $uploadedFiles = $request->file('files');
    
    // 验证或处理逻辑...
    dd($request->all()); // 此时可以正常输出所有请求数据
}

为什么之前的方法失效？ #

• 直接发送PUT请求：Laravel默认解析器不处理PUT方法的multipart/form-data格式，导致$request->all()为空。
• 嵌套FormData到普通对象：请求的Content-Type会变为application/json或application/x-www-form-urlencoded，FormData无法被正确序列化，后端自然拿到null。

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