FilePond文件验证失效求助：不符合要求文件仍可上传至后端

前端代码问题修复 #

你的代码存在几个关键问题，直接导致验证规则失效：

1. 重复引入FilePond核心库
   代码里两次加载了filepond.js，第二次加载会覆盖之前的插件注册逻辑，使得验证插件无法正常工作，必须删掉其中一次引入。

2. 未初始化FilePond实例
   你仅获取了input元素，但没有调用FilePond.create()创建实例，配置的验证规则根本没绑定到组件上。

3. 插件注册不完整
   你引入了FilePondPluginImageExifOrientation插件，但没在代码里注册，虽然不影响验证，但会导致图片方向处理失效，建议一并注册。

修复后的完整前端代码：

<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>

<script>
    // 注册所有用到的插件
    FilePond.registerPlugin(
        FilePondPluginImageResize,
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation
    );

    const inputElement = document.querySelector('input[id="photo"]');
    // 初始化FilePond实例并应用配置
    const pond = FilePond.create(inputElement, {
        server: {
            url: '/upload',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        },
        validate: {
            acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp'],
            maxFileSize: '2MB' // 用字符串写法更直观，避免计算错误
        }
    });
</script>

Laravel后端验证修复 #

前端验证只是第一道防线，后端必须兜底拦截。在你的上传控制器方法里添加以下验证逻辑：

public function upload(Request $request)
{
    $request->validate([
        'photo' => 'required|image|mimes:jpeg,png,webp|max:2048', // 2048KB = 2MB
    ]);

    // 后续上传处理逻辑
    // ...
}

如果后端验证仍不生效，检查这几点：

• 确保表单设置了enctype="multipart/form-data"属性，否则文件无法正确传递到后端
• 查看storage/logs/laravel.log日志，排查是否有隐藏的错误信息
• 确认路由配置正确，/upload指向对应的控制器方法

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