FilePond上传文件时Laravel API返回passport字段必填错误如何解决

{"status":201,"errors":{"passport":["The passport field is required."]}}
该报错是后端无法正常解析请求体中的passport字段导致的，你的FilePond配置存在两处直接触发问题的错误：

• 手动指定了错误的Content-Type请求头：上传文件使用FormData格式时，不能手动设置Content-Type: application/json，浏览器会自动为FormData请求生成带边界标识的multipart/form-data类型请求头，你手动设置为JSON类型后，后端会将请求体按JSON格式解析，自然找不到FormData里的passport字段
• 多余的ondata手动字段追加逻辑：你已经配置了name: 'passport'，FilePond会自动把用户选中的文件绑定到passport字段上传，你手动append的Passport变量大概率没有拿到正确的文件对象，甚至可能覆盖正确的字段值

修改后的配置参考如下：

<FilePond
    name='passport'
    server={{
        process: {
            url: 'http://sub.gulflandproperty.net/api/admin/v1/storepassport',
            method: 'POST',
            withCredentials: false,
            headers: {
                // 移除手动设置的Content-Type，交给浏览器自动处理
                'AUTHORIZATION': 'Bearer ' + admin_token
            },
            // 移除多余的ondata逻辑
            name: 'passport'
        },
    }}

    allowMultiple={false}
    instantUpload={false}
    allowFileTypeValidation={true}
    maxFiles={1}
    // 补充官方格式校验属性，避免用户上传非PDF文件
    acceptedFileTypes={['application/pdf']}
    labelIdle='Upload Passport Here (<span class="filepond--label-action"> PDF only </span>)'
/>

如果修改配置后依然报错，可以按以下步骤验证：

• 打开浏览器控制台网络面板，查看实际发送的请求体中，是否存在passport字段对应的文件数据
• 确认后端接口是否确实要求multipart/form-data格式传文件，若接口要求JSON格式传输（需转base64）则需要单独调整上传逻辑

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