Node.js与React中使用Multer时图片未在Payload中传输问题

核心错误原因 #

1. 错误将FormData转为普通JSON对象发送：
   在registerActions.js中，你把FormData遍历转换为jsonObject后发送，但文件对象属于特殊类型，无法被序列化为普通JSON结构，导致图片数据完全丢失，后端自然接收不到uniIDImage文件。

2. 手动设置Content-Type导致解析失败：
   发送multipart/form-data请求时，axios会自动根据FormData生成包含boundary的正确请求头。手动设置固定的'multipart/form-data;'会丢失关键的boundary参数，后端multer无法正确解析请求中的文件内容。

修复后的代码 #

前端registerActions.js修改 #

export const register = (formData) => async dispatch => {
    // 无需手动设置Content-Type，axios会自动处理
    const config = {
        headers: {}
    }

    try {
        // 直接发送原始FormData，不要转为JSON对象
        const res = await axios.post('/register', formData, config);
        dispatch({
            type: REGISTER_SUCCESS,
            payload: res.data
        });
    } catch (err) {
        dispatch({
            type: REGISTER_FAIL,
        });
    }
}

可选优化：Register.js中uniIDImage初始状态 #

将初始状态设为空对象，避免潜在的读取错误：

const [uniIDImage, setUniIDImage] = useState({});

后端代码无需修改 #

你的multer配置和路由处理逻辑是正确的，只要前端正确发送FormData，后端就能正常获取req.file并完成文件处理。

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