React向Node后端API发POST请求时部分字段未存入数据库

AI 小北

2026-9-3

问题成因

构造的FormData完全未被使用：代码中创建了formData实例存储图片文件，但实际发起axios请求时传递的是JSON格式普通对象，formData根本没有被传入请求体，后端无法接收到上传的图片文件。如果后端接口是按照multipart/form-data格式做的参数解析，还会因为请求格式不匹配出现大量字段解析失败的情况。
数据传递逻辑存在冗余：代码中updatedData已经通过展开运算符全量引入了全局user数据和图片字段，发请求时又重复展开user和updatedData做合并，虽然这步本身不会直接丢字段，但如果全局user状态在分步表单切换过程中存在响应式更新遗漏、部分步骤的表单值没有正确写入全局状态，就会直接导致提交时字段缺失。
请求格式与后端预期不匹配：axios发送普通JSON对象时默认Content-Type为application/json，如果后端注册接口需要同时接收文件和表单字段、按multipart/form-data格式编写解析逻辑，就会出现参数解析不全、部分字段无法写入数据库的问题。

修复方案

废弃冗余的普通对象合并逻辑，将所有注册所需字段（包括图片文件）全部追加到FormData实例中，直接将FormData作为请求体发送。
无需手动设置Content-Type请求头，浏览器会自动为FormData请求携带带正确boundary值的multipart/form-data头，手动设置反而会导致boundary缺失、后端解析失败。
提交前先校验全局user对象的完整性，确认五步表单的所有字段都已正确写入全局状态，不存在步骤切换时字段丢失的问题。

修复后的核心提交逻辑代码如下：

//register user after submit details
const handleSubmit = async (event) => {
    event.preventDefault();
    try {
        const { user } = props
        const formData = new FormData();
        // 传入图片文件对象，而非仅传文件名
        formData.append('image', files[0]);
        // 将全局user的所有字段追加到FormData
        Object.entries(user).forEach(([key, value]) => {
            formData.append(key, value);
        });

        // 直接发送FormData请求体
        await axios.post(`${BASE_API_URL}/api/auth/register`, formData);

        Swal.fire('Awesome!', "You're successfully registered!", 'success').then(
            (result) => {
                if (result.isConfirmed || result.isDismissed) {
                    props.resetUser();
                    navigate('/user/login');
                }
            }
        );
    } catch (error) {
        console.log(error)
        if (error.response) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: error.response.data
            });
            console.log('error', error.response.data);
        }
    }
};

排错提示：如果调整请求逻辑后仍存在字段缺失，可以在发送请求前执行console.log(Array.from(formData.entries()))打印FormData内的所有字段做校验。如果打印结果里本身就缺少对应字段，问题出在分步表单的状态同步逻辑——即对应字段没有正确写入全局user对象，和接口请求逻辑无关。

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