Axios PUT请求中Multipart/form-data无法正常工作问题排查

问题核心原因 #

1. 手动设置multipart/form-data头部的问题：当你手动指定这个头部时，没有包含FormData必需的boundary分隔符，后端Laravel无法正确解析请求体，导致请求体为空。Axios会自动根据FormData对象生成带正确boundary的Content-Type（比如multipart/form-data; boundary=----WebKitFormBoundaryxxxx），完全不需要手动设置。
2. Laravel对PUT请求的FormData解析限制：PHP原生只在POST请求中填充$_FILES数组，Laravel默认不会自动解析PUT请求的multipart/form-data，所以即使请求体格式正确，后端也拿不到上传的文件。

解决方案及修改代码 #

方案一：用POST请求模拟PUT（推荐）

在FormData中追加_method: 'PUT'标识，用POST请求发送，Laravel会自动识别为PUT请求并正确解析FormData里的所有数据（包括文件）：

const formData = new FormData();
formData.append('first_name', values.first_name);
formData.append('last_name', values.last_name);
formData.append('phone_no', values.phone_no);
formData.append('profile_picture', values.profile_picture, 'bermuda.png');
formData.append('password', values.password);
// 追加PUT方法标识，让Laravel识别为PUT请求
formData.append('_method', 'PUT');

await axios
  .post(`/api/v1/users/${user.member_no}`, formData)
  .then((res) => {
    console.log(res.data);
    if (res.status === 200) { // 更新接口一般返回200，可根据你的后端实际情况调整
      toast.success('Member updated successfully.');
      refreshUser();
    }
  })
  .catch((err) => {
    toast.error(err.response.data.message);
  });

setLoading(false);

方案二：移除手动头部+后端适配（不推荐，仅作参考）

如果坚持要用PUT请求，先移除手动设置的Content-Type，再修改Laravel端的请求解析逻辑：

前端代码修改：

const formData = new FormData();
formData.append('first_name', values.first_name);
formData.append('last_name', values.last_name);
formData.append('phone_no', values.phone_no);
formData.append('profile_picture', values.profile_picture, 'bermuda.png');
formData.append('password', values.password);

// 移除手动设置的Content-Type，让axios自动生成带boundary的正确头部
await axios
  .put(`/api/v1/users/${user.member_no}`, formData)
  .then((res) => {
    console.log(res.data);
    if (res.status === 200) {
      toast.success('Member updated successfully.');
      refreshUser();
    }
  })
  .catch((err) => {
    toast.error(err.response.data.message);
  });

setLoading(false);

后端Laravel控制器中手动解析请求：

public function update(Request $request, $member_no)
{
    // 手动解析multipart/form-data格式的PUT请求
    $data = $request->all();
    $file = $request->file('profile_picture');
    // 后续业务逻辑...
}

这种方法存在兼容性风险，更推荐方案一的POST模拟PUT方式。

补充说明 #

POST请求正常的原因是：Axios自动生成了带boundary的正确Content-Type，且Laravel默认会解析POST请求的multipart/form-data，所以文件和表单数据都能被正常接收。

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