React向AspNetCore发送图片失败：我的代码存在什么问题？

看起来你在React上传文件到ASP.NET Core后端时遇到了格式不匹配的核心问题，我帮你拆解下错误点并给出修正方案：

主要错误点 #

1. File对象序列化无效：你用JSON.stringify({photo: this.state.Images[0]})尝试把File对象转成JSON，但File是二进制类型，JSON序列化会丢失所有有效数据，后端根本无法解析。
2. 请求格式不匹配：后端用IFormFile接收文件，要求请求必须是multipart/form-data格式，但你发送的是JSON格式，两者完全不兼容。
3. 路由大小写不匹配：前端URL里的操作是小写add，但后端判断的是大写Add，这会导致你的业务逻辑根本不会执行。
4. 重复事件触发：按钮同时绑定了onClick和表单的onSubmit，容易导致重复提交请求。

修正后的代码示例 #

前端React部分 #

首先确保onChangeImage正确保存选中的文件：

onChangeImage = (event) => {
  this.setState({ Images: event.target.files });
}

然后修改表单和提交函数：

<form onSubmit={this.onSubmit}> 
  <label htmlFor="Images">Images:</label> 
  <input type="file" id="Images" onChange={this.onChangeImage} accept="image/png, image/jpeg"/> 
  <button type="submit">Submit</button> 
</form>

onSubmit = (event) => { 
  event.preventDefault(); 
  
  // 先判断是否有选中文件
  if (!this.state.Images || this.state.Images.length === 0) {
    alert("请先选择图片");
    return;
  }

  // 构建FormData对象，这是上传文件的标准格式
  const formData = new FormData();
  // 注意key要和后端参数名"photo"完全一致
  formData.append('photo', this.state.Images[0]);

  fetch(`https://localhost:5001/api/projects/edit/image/${this.props.projectId}/Add`, { 
    method: "PUT", 
    body: formData 
    // 不需要手动设置Content-Type，fetch会自动添加正确的multipart/form-data头和边界
  })
  .then(response => {
    if (response.ok) {
      console.log("图片上传成功！");
    } else {
      console.error("上传失败，请检查后端配置");
    }
  })
  .catch(error => console.error("请求发生错误:", error));
}

后端ASP.NET Core部分 #

修正大小写匹配问题，并优化返回值（建议不要用void，返回IActionResult便于前端判断状态）：

[HttpPut] 
[Route("projects/edit/image/{id}/{toDo}")] 
public IActionResult EditProjectImage(string id, string toDo, IFormFile photo) { 
  // 用忽略大小写的判断，避免前后端大小写不一致的问题
  if(string.Equals(toDo, "Add", StringComparison.OrdinalIgnoreCase)) { 
    var result = mContext.Projects.Single(project => project.Id.Equals(id));
    // 这里添加你的文件保存逻辑，比如保存到服务器磁盘或云存储
    return Ok("图片上传成功");
  } 
  return BadRequest("无效的操作类型");
}

额外注意事项 #

• 检查跨域配置：如果前端和后端端口不同，需要在ASP.NET Core中配置CORS允许前端域名的请求。
• 查看开发者工具：可以在浏览器Network面板中查看请求的FormData是否正确包含文件，以及请求头是否为multipart/form-data。
• 文件大小限制：如果上传大图片，需要在后端设置允许的最大请求大小（可以在Program.cs或Startup.cs中配置）。

内容的提问来源于stack exchange，提问作者Fábio Ramos