Angular14向Asp.Net6 API上传图片丢失二进制数据的解决方法

问题根源 #

1. 浏览器安全限制：直接将file输入框绑定到表单控件，只会返回C:\fakepath\xxx这类虚拟路径，不会暴露真实文件数据。
2. 文件读取逻辑错误：原代码中Uint8Array.from(uint8Array).toString()会把二进制数组转成无意义的逗号分隔数字串，并非有效二进制或Base64数据。
3. 请求格式错误：用JSON格式提交二进制数据效率低下且易出错，文件上传应使用FormData格式。

解决方案步骤 #

一、修正Angular组件的文件处理与表单赋值

1. 调整文件读取逻辑：正确读取文件并更新表单数组

uploadImage(event: any) {
  const files = event.target.files;
  const imagesArray = this.advForm.get('images') as FormArray;
  
  // 清空现有图片（按需选择）
  imagesArray.clear();
  
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    
    // 直接保留File对象，后续用FormData提交（推荐方案）
    imagesArray.push(this.fb.group({
      id: 0,
      file: file // 存储File对象而非路径
    }));
  }
}

2. 修改服务层的请求方法：改用FormData提交数据

postAdvertisement(adv: any): Observable<Advertisement> {
  const formData = new FormData();
  
  // 添加普通字段
  formData.append('id', adv.id.toString());
  formData.append('name', adv.name);
  formData.append('price', adv.price.toString());
  formData.append('description', adv.description);
  
  // 批量添加图片文件
  adv.images.forEach((img: any, index: number) => {
    formData.append(`images[${index}].file`, img.file);
  });
  
  return this.http.post<Advertisement>(`${this.baseApiUrl}/api/advertisements`, formData);
}

3. 调整模型映射方法：适配File对象的存储

mapFormValuesToAdvModel() {
  this.adv.name = this.advForm.value.name;
  this.adv.price = this.advForm.value.price;
  this.adv.description = this.advForm.value.description;
  this.adv.images = this.advForm.value.images.map((img: any) => ({
    id: img.id,
    file: img.file
  }));
}

二、调整ASP.NET 6 API端的接收逻辑

1. 更新模型类：支持接收文件对象

public class Advertisement
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Description { get; set; }
    public List<AdvertisementImage> Images { get; set; }
}

public class AdvertisementImage
{
    public int Id { get; set; }
    public IFormFile File { get; set; } // 用于接收上传的文件
}

2. 修改控制器方法：添加[FromForm]特性接收FormData

[HttpPost]
public async Task<IActionResult> PostAdvertisement([FromForm] Advertisement adv)
{
    // 读取图片二进制数据
    foreach (var img in adv.Images)
    {
        if (img.File != null && img.File.Length > 0)
        {
            using var memoryStream = new MemoryStream();
            await img.File.CopyToAsync(memoryStream);
            byte[] binaryData = memoryStream.ToArray();
            
            // 后续操作：存入数据库或文件系统
        }
    }
    
    return Ok(adv);
}

三、额外注意事项

• Angular端无需手动设置Content-Type，HttpClient会自动为FormData设置multipart/form-data头部。
• 若上传大文件，需在ASP.NET 6的appsettings.json中调整请求大小限制：

{
  "Kestrel": {
    "Limits": {
      "MaxRequestBodySize": 52428800 // 50MB
    }
  }
}

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