ReactJS向Laravel传FormData文件提示字段为空的解决方法

核心原因 #

ApiSlice中强制设置了Content-Type: application/json请求头，导致浏览器无法自动生成FormData所需的multipart/form-data头，Laravel无法解析请求中的文件字段，因此返回"file必填"的错误。

解决方案 #

1. 修改ApiSlice的请求头配置 #

移除固定的Content-Type设置，让浏览器根据请求体自动处理：

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: `https://example_server.com/api`,
    prepareHeaders: (headers) => {
      headers.set("X-Requested-With", "XMLHttpRequest");
      headers.set("Accept", "application/json"); // 保留Accept头

      const token = localStorage.getItem("token");
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
      // 移除强制设置的Content-Type: application/json
      return headers;
    },
  }),
  endpoints: (builder) => ({}),
});

2. 优化文件状态的类型与判断 #

将文件状态类型改为File | null，避免空字符串与File类型混淆：

// 替换原状态定义
const [file, setFile] = useState<File | null>(null);

// 修改handleSubmit中的判断逻辑
const handleSubmit = async (e: React.FormEvent<HTMLElement>) => {
  e.preventDefault();
  if (file) { // 直接判断文件是否存在
    console.log("File found ! Preparing the upload...");
    await handleFileUpload(file);
  }
};

3. 调试确认文件与FormData有效性 #

添加日志确认文件是否被正确获取、FormData是否构造成功：

const handleFileUpload = async (submittedFile: File) => {
  try {
    console.log("上传的文件：", submittedFile); // 确认文件信息
    const formData = new FormData();
    formData.append("file", submittedFile);
    console.log("FormData内容：", [...formData.entries()]); // 确认file字段存在

    const response: any = await uploadFile(formData).unwrap();
    if (response.file_url) {
      console.log("文件路径：", response.file_url);
    } else {
      console.error("响应中未返回文件路径");
    }
  } catch (error) {
    console.error("上传失败：", (error as Error).message);
  }
};

4. 确认Dropzone的文件接收逻辑 #

确保Dropzone正确返回文件：

<Dropzone onDrop={(acceptedFiles) => {
  console.log("Dropzone接收的文件：", acceptedFiles); // 确认文件数组
  setFile(acceptedFiles[0]);
}}>
  {/* 原UI代码 */}
</Dropzone>

验证 #

修改后重新上传文件，Laravel将能正确解析FormData中的file字段，返回文件存储路径。

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