React使用Axios向Laravel API传文件数据时FormData为空问题求解

• 你没有将所有请求参数都放入同一个FormData实例中，而是将FormData和普通数据分别作为两个键传递给Axios，Axios会将整个请求体序列化为JSON格式，服务端无法按multipart/form-data解析到对应字段
• 手动设置Content-Type: multipart/form-data是错误的，FormData请求必须携带自动生成的boundary分隔符，手动写死请求头会丢失该参数，导致服务端无法拆分表单内容
• 将FormData嵌套到普通对象中传递的方式无效，Axios序列化普通对象时会直接丢弃FormData类型的字段值

1. 调整请求逻辑，将所有普通字段和文件都追加到同一个FormData实例中，直接将FormData作为请求体传递给Axios：

export const send = (data, file) => {
  const formData = new FormData();
  // 追加文件
  formData.append('media', file);
  // 遍历追加所有普通字段
  Object.keys(data).forEach(key => {
    formData.append(key, data[key]);
  });

  // 若你的Laravel接口是PUT/PATCH类型，需要加方法欺骗，取消下面一行的注释
  // formData.append('_method', 'PUT');

  PostRequest.post('/post', formData)
    .then(r => console.log(r.data))
    .catch(e => console.log(e));
};

2. 删除你手动配置的Content-Type: multipart/form-data请求头，Axios会在检测到请求体为FormData类型时，自动生成带正确boundary的请求头。
3. Laravel端按常规方式接收参数即可：

// 接收普通字段
$mobile = $request->get('mobile');
// 接收文件
$media = $request->file('media');

打开浏览器开发者工具的「网络」面板，找到对应请求，查看「载荷」标签下的Form Data部分，确认所有字段和文件都正常展示，就说明前端发送逻辑正确。

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