如何解决React通过API上传图片时出现的415/400及IFormFile反序列化报错问题

后端调整 #

1. 接口参数必须添加[FromForm]注解，用于接收表单格式的请求数据：

[Route("Add")]
[HttpPost]
public void Post([FromForm] Group group)
{
    // 原有业务逻辑
}

2. 确认Group类的IFormFile属性名为ImageFile，后续前端传参的key必须和该属性名完全匹配。

前端调整 #

1. 首先修正请求路径的拼写错误，移除路径中的多余空格。
2. 提交FormData时，需要把Group模型对应的所有字段都传入，且字段key和后端属性名保持一致：

const handleFormSubmit = e => {
    e.preventDefault()
    const formData = new FormData()
    // 字段名和后端Group类属性完全对应
    formData.append('ImageFile', values.imageFile)
    formData.append('GroupName', values.GroupName)
    formData.append('GroupAbout', values.GroupAbout)
    formData.append('imageName', values.imageName)
    addOrEdit(formData)
}

3. axios发送FormData请求时，不需要手动设置Content-Type请求头，浏览器会自动生成带boundary标识的正确头信息：

const addOrEdit = (formData) => {
    // 修正路径中的多余空格
    axios.post('api/groups/add', formData)
    .catch(error => {
        console.log(error.response?.data || error.message);
        console.log(error.response?.status);
        console.log(error.response?.headers);
    });
}

• 415报错：后端默认将请求按JSON格式解析，但你发送的是FormData格式的请求，媒体类型不匹配导致报错。
• 添加[FromForm]后无请求抵达后端：你原先的请求路径存在多余空格，导致路由匹配失败404，同时传入的字段名和后端属性不匹配，模型绑定失败。
• 传JSON格式报400/反序列化错误：IFormFile属于接口类型，ASP.NET Core不支持直接从JSON反序列化接口类型，且二进制文件无法通过JSON格式传输，必须使用FormData格式提交。

内容的提问来源于stack exchange，提问作者R-S