Laravel中如何获取FormData内的章节标题、子章节标题及文件数据

问题核心原因 #

你现在遇到的问题主要来自两个错误点：

1. 前端代码存在笔误，且文件无法通过JSON序列化正常传输
2. 后端没有对FormData中传入的JSON字符串做解码，直接读取字段自然拿不到对应值

前端修复步骤 #

• 首先修正axios传参笔误：你代码中定义的FormData变量是formData，但axios.post里传的是form，这个错误会导致你实际传给后端的是空数据。
• 调整文件传输逻辑：File对象无法被JSON.stringify()序列化，你现在把文件字段塞到sections数组里转JSON，到后端只会得到空对象，需要单独把每个上传的文件append到FormData中，给每个文件绑定唯一标识和子章节对应。

改后的Vue核心代码示例：

const createCourse = (e) => {
  e.preventDefault();
  // 拷贝sections数据，移除file字段避免序列化失败
  const sectionsForJson = sections.map((section, idx) => {
    return {
      ...section,
      sub_sections: section.sub_sections.map((sub, i) => {
        return {
          ...sub,
          // 只存文件对应的唯一key，不存File对象
          file_key: sub.file ? `sub_file_${idx}_${i}` : ''
        }
      })
    }
  })
  let newCourse = JSON.stringify(course)
  let newSection = JSON.stringify(sectionsForJson)
  const formData = new FormData();
  formData.append("course", newCourse);
  formData.append("sections", newSection);
  // 单独append所有文件到FormData
  sections.forEach((section, idx) => {
    section.sub_sections.forEach((sub, i) => {
      if (sub.file) {
        formData.append(`sub_file_${idx}_${i}`, sub.file)
      }
    })
  })
  showLoader(true);
  // 修正传参为formData
  axios.post('/api', formData, { headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
    NotificationService.success(response.data.message);
    showLoader(false);
    course.title = '';
    course.description = '';
  }).catch(err => {
    NotificationService.error(err.response);
    showLoader(false);
  });
}

后端修复步骤 #

• 首先对FormData中拿到的course和sections字段做JSON解码，转成数组/对象后再读取内部字段
• 用$request->file()方法获取对应标识的上传文件

改后的Laravel核心代码示例：

// 解码JSON数据
$course = json_decode($request->get('course'), true);
$sections = json_decode($request->get('sections'), true);

// 读取课程基础信息
echo $course['title']; // 课程标题
echo $course['description']; // 课程描述

// 遍历读取章节、子章节信息，同时获取对应文件
foreach ($sections as $section) {
    echo $section['section_title']; // 章节标题
    foreach ($section['sub_sections'] as $subSection) {
        echo $subSection['sub_section_title']; // 子章节标题
        if (!empty($subSection['file_key'])) {
            // 获取对应上传文件
            $uploadFile = $request->file($subSection['file_key']);
            // 后续可以做文件存储等逻辑
        }
    }
}

补充说明：如果你的Laravel开启了CSRF校验，记得在请求头里加上X-CSRF-TOKEN字段，避免请求被拦截。

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