向ASP.NET Core Web API提交数据时参数为空问题排查

你遇到的fileName和base64String始终为null的问题，核心原因出在ASP.NET Core的模型绑定规则，另外还有一个潜在的base64转换问题需要一并解决，下面分点说明：

1. 模型绑定失败的核心原因：C#类使用字段而非属性 #

ASP.NET Core的[FromBody]模型绑定默认只处理带getter和setter的公共属性，而你的Image类定义的是公共字段，不会被自动绑定：

// 错误写法：字段不会被FromBody绑定
public class Image{ 
  public string base64String; 
  public string fileName; 
}

修复方案 #

把字段改成带get; set;的公共属性，同时建议遵循C#的PascalCase命名规范，再通过JsonPropertyName映射前端传递的小写键名（避免修改前端代码）：

using System.Text.Json.Serialization;

public class Image{ 
  [JsonPropertyName("base64String")]
  public string Base64String { get; set; } 
  [JsonPropertyName("fileName")]
  public string FileName { get; set; } 
}

然后在Add方法中更新属性引用：

[HttpPost] 
public async Task Add([FromBody] Image image ){ 
  string connectionString = "storageconnection"; 
  BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString); 
  BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient("containername"); 
  BlobClient blobClient = containerClient.GetBlobClient(image.FileName); 
  
  // 后续处理...
}

2. 潜在的Base64转换错误 #

前端通过readAsDataURL得到的字符串包含前缀（比如data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...），直接用Convert.FromBase64String会抛出异常，需要先移除前缀：

// 移除base64字符串的前缀部分
var base64Data = image.Base64String.Split(',')[1];
byte[] imageBytes = Convert.FromBase64String(base64Data); 

3. 前端代码的优化建议 #

• 添加空值判断，避免files为空时出现错误：

const fileUploadHandler = (files: FileList | null) => { 
  if (!files || files.length === 0) return; // 新增空值判断
  console.log(files[0]) 
  const reader = new FileReader(); 
  reader.onload = function(event){ 
    const contents = event.target?.result as string;
    if (!contents) return; // 新增内容空值判断
    agent.Images.create(contents, files[0].name); // 用真实文件名替代固定的'test'
  } 
  reader.readAsDataURL(files[0]); 
} 

• 使用上传文件的真实文件名files[0].name，比固定字符串'test'更合理。

总结 #

做完以上修改后，后端就能正确接收前端传递的base64String和fileName，同时也能避免Base64转换的异常问题。

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