Laravel+Inertia框架下PDF文件上传失败问题求助

一、先解决表单无法提交的问题：移除FileReader相关代码 #

你用FileReader处理文件的思路完全错误——FileReader是用来读取文件内容的，不是用来传递文件对象的，这种处理会导致FormData格式异常，直接移除这部分代码即可。

二、前端表单正确处理方式 #

Inertia处理文件上传时，不需要手动构建复杂的FormData，利用useForm的multipart配置就能自动处理，以下是Vue 3环境的示例：

模板部分 #

确保表单enctype属性正确，文件输入框通过change事件绑定文件：

<form @submit.prevent="submitForm" enctype="multipart/form-data">
  <input type="text" v-model="form.title" placeholder="输入标题" />
  <input type="file" @change="setFile" accept=".pdf" />
  <button type="submit" :disabled="form.processing">提交</button>
</form>

脚本部分 #

用useForm管理表单数据，通过change事件赋值文件对象，提交时开启multipart模式：

import { useForm } from '@inertiajs/vue3'

export default {
  setup() {
    const form = useForm({
      title: '',
      pdf_file: null
    })

    const setFile = (e) => {
      // 直接把文件对象赋值给form字段
      form.pdf_file = e.target.files[0]
    }

    const submitForm = () => {
      form.post(route('your.store.route'), {
        // 关键：开启multipart模式，Inertia会自动处理FormData
        multipart: true,
        onSuccess: () => {
          form.reset()
        },
        onError: (errors) => {
          // 处理验证错误
        }
      })
    }

    return { form, setFile, submitForm }
  }
}

三、后端控制器排查要点 #

1. 验证字段一致性
   前端传递的字段名是pdf_file，后端必须用相同名称接收，同时添加文件验证规则：

public function store(Request $request)
{
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'pdf_file' => 'required|file|mimes:pdf|max:2048' // 限制文件类型和大小
    ]);

    // 处理文件上传
    if ($request->hasFile('pdf_file')) {
        $filePath = $request->file('pdf_file')->store('uploads/pdfs');
        // 保存到数据库，示例：
        // Document::create([
        //     'title' => $validated['title'],
        //     'pdf_path' => $filePath
        // ]);
    }

    return redirect()->route('your.index.route');
}

2. 检查PHP配置
   确保php.ini中的以下参数值足够大，避免文件过大被拦截：

upload_max_filesize = 2M
post_max_size = 8M

四、常见坑点规避 #

• 不要给文件输入框用v-model：文件输入框无法通过双向绑定直接获取文件，必须通过change事件处理。
• 避免嵌套表单：嵌套的<form>标签会导致浏览器忽略外层表单的enctype属性，检查DOM结构。
• 确认路由方法：对应路由必须是POST或PUT/PATCH方法，GET请求无法携带文件。

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