Angular传Base64图片至ASP.NET Core报错：无效Base64格式

问题出在你用readAsDataURL生成的字符串包含数据URL前缀（例如data:image/jpeg;base64,），这个前缀不属于标准Base64编码内容，后端直接用Convert.FromBase64String解析就会触发非法字符错误。

方案一：前端处理（推荐） #

在Angular中移除数据URL前缀后再赋值给表单：

fileSelected(files: FileList) {
  let file = <File>files[0];
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    // 拆分字符串，提取纯Base64部分
    const base64Data = reader.result?.toString().split(',')[1];
    this.form.get('product_Image').setValue(base64Data);
  };
}

方案二：后端处理 #

如果无法修改前端代码，可以在ASP.NET Core中先移除前缀再解析：

var rawImageData = vm.Product_Image;
// 检查并移除数据URL前缀
if (!string.IsNullOrEmpty(rawImageData) && rawImageData.StartsWith("data:image/"))
{
    rawImageData = rawImageData.Split(',')[1];
}
// 用Path.Combine拼接路径，避免跨平台问题
var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "Product", "test.jpg");
await File.WriteAllBytesAsync(savePath, Convert.FromBase64String(rawImageData));

关于readAsBinaryString的补充 #

如果你想用readAsBinaryString，需要手动将二进制字符串转为Base64，否则直接传递的字符串也不符合Base64格式：

fileSelected(files: FileList) {
  let file = <File>files[0];
  let reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onloadend = () => {
    // 将二进制字符串转为Base64
    const base64String = btoa(reader.result as string);
    this.form.get('product_Image').setValue(base64String);
  };
}

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