同时发送对象与文件至服务器时出现415错误（react-hook-form）

云上老周

2026-8-1

解决React Hook Form + Axios上传文件和对象时的415错误

问题根源

415错误是后端不支持请求的媒体类型，核心问题出在两处：

手动设置请求头导致解析失败：使用axios发送FormData时，框架会自动生成带boundary的multipart/form-data请求头，手动设置该头会覆盖自动生成的内容，后端无法识别多部分表单的分隔标识。
数据格式不匹配：前端把宠物数据包装成了数组[{...}]，但后端接口接收的是单个PetDTO对象，和Postman测试时的正确格式不一致。

修复步骤

1. 移除手动设置的Content-Type

删除headers里的'Content-Type': 'multipart/form-data'，让axios自动处理：

const headers = {
    Authorization: `Bearer ${token}`, // 仅保留认证头
}

2. 调整请求数据结构

把数组格式的宠物数据改成单个对象，匹配后端的PetDTO接收类型：

const data = {
    petname: e.petname,
    age: e.age,
    type: e.type,
    weight: e.weight,
    firstmet: e.firstmet
};

3. 优化FormData的拼接方式

不需要把JSON转成Blob，直接传递字符串即可，后端的@RequestPart会自动解析为PetDTO：

formData.append("request", JSON.stringify(data));

完整修复后的前端代码

const headers = {
    Authorization: `Bearer ${token}`,
}

const handleFormSubmit = async (e) => {
    const data = {
        petname: e.petname,
        age: e.age,
        type: e.type,
        weight: e.weight,
        firstmet: e.firstmet
    };

    const formData = new FormData();
    formData.append("file", e.file[0]);
    formData.append("request", JSON.stringify(data));

    try {
        const response = await axios.post("http://localhost:5000/api/pet/petform", formData, {
            headers: headers
        });
        // 处理成功逻辑
    } catch (error) {
        // 处理错误逻辑
        console.error(error);
    }
}