Angular13上传图文至.NET5 ASP.NET Core Web API控制器无法读取

• 前端直接提交JSON格式的表单值，未使用multipart/form-data编码封装请求，ASP.NET Core的IFormFile类型仅能识别该编码格式下的文件数据
• 前端未将选中的文件对象加入请求载荷，仅传递了表单文本值，文件本身未发送到后端
• 后端路径拼接逻辑错误：IWebHostEnvironment.WebRootPath默认直接指向项目wwwroot目录，重复拼接wwwroot会导致存储路径无效
• 后端Action参数未显式指定绑定源，混合接收复杂类型与文件参数时，模型绑定器无法正确识别参数来源

前端Angular 13 调整 #

首先修改组件类逻辑，单独存储选中的文件对象，提交时使用FormData封装所有表单字段与文件，不要直接发送响应式表单的value对象：

// 组件内声明变量存储选中的文件
selectedFile: File | null = null;
imageSrc: string | ArrayBuffer | null = null;

// 文件选择事件逻辑
onFileChange(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    this.selectedFile = target.files[0];
    // 保留原有图片预览逻辑
    const reader = new FileReader();
    reader.onload = e => this.imageSrc = reader.result;
    reader.readAsDataURL(this.selectedFile);
  }
}

// 重写提交方法
submit() {
  if (!this.myForm.valid || !this.selectedFile) {
    alert('请完善商品信息并选择上传图片');
    return;
  }
  const uploadData = new FormData();
  // 逐个追加表单字段，字段名必须和后端Dto属性名完全一致
  uploadData.append('ProductName', this.myForm.controls['ProductName'].value);
  uploadData.append('ProductDescription', this.myForm.controls['ProductDescription'].value);
  uploadData.append('price', this.myForm.controls['price'].value);
  uploadData.append('created', this.myForm.controls['created'].value);
  uploadData.append('ProductCatID', this.myForm.controls['ProductCatID'].value);
  // 追加文件，字段名必须和后端IFormFile参数名一致
  uploadData.append('Image', this.selectedFile, this.selectedFile.name);

  this.http.post('https://localhost:5001/api/Products', uploadData)
    .subscribe(res => {
      console.log(res);
      alert('上传成功');
      // 提交成功后重置表单
      this.myForm.reset();
      this.selectedFile = null;
      this.imageSrc = null;
    });
}

HTML表单部分仅需要删除文件输入框上的formControlName="ImageUrl"属性即可，其余代码无需改动——文件不需要绑定到响应式表单控件，直接通过selectedFile变量管理即可，避免表单值序列化异常。

后端.NET 5 调整 #

首先给Action参数添加[FromForm]特性，明确指定从表单数据绑定参数，同时修正文件存储路径，增加目录存在性校验、文件名防重逻辑：

[HttpPost]
public async Task<ActionResult<ProductDto>> CreateProductAsync([FromForm] CreateProductDto pro, [FromForm] IFormFile Image)
{
    try
    {
        if (Image == null || Image.Length == 0)
        {
            return BadRequest("未选择上传的商品图片");
        }

        // 修正存储路径：WebRootPath已指向wwwroot，无需重复拼接
        var imageSaveFolder = Path.Combine(_environment.WebRootPath, "images");
        // 自动创建不存在的目录，避免首次运行抛出目录不存在异常
        if (!Directory.Exists(imageSaveFolder))
        {
            Directory.CreateDirectory(imageSaveFolder);
        }
        // 生成唯一文件名，避免同名文件被覆盖
        var saveFileName = $"{Guid.NewGuid():N}_{Path.GetFileName(Image.FileName)}";
        var fullSavePath = Path.Combine(imageSaveFolder, saveFileName);

        // 保存文件到指定目录
        using (var stream = new FileStream(fullSavePath, FileMode.Create))
        {
            await Image.CopyToAsync(stream);
        }

        // 将图片的可访问相对路径存入Dto，后续写入数据库
        pro.ImageUrl = $"/images/{saveFileName}";

        var productEntity = _mapper.Map<Product>(pro);
        var newProduct = _SqlService.AddProduct(productEntity);
        var productForReturn = _mapper.Map<ProductDto>(newProduct);

        return CreatedAtRoute("GetProduct", new { id = productForReturn.ProId }, productForReturn);
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"服务器内部错误：{ex.Message}");
    }
}

额外配置注意事项 #

• 确认Startup.cs的Configure方法中已添加静态文件中间件app.UseStaticFiles();，且位置在路由配置之前，否则上传后的图片无法通过HTTP路径直接访问
• 部署应用时，需要给运行应用的用户账号授予wwwroot/images文件夹的读写权限，否则会出现文件写入权限错误
• 可根据业务需求在Action上添加[RequestSizeLimit(10 * 1024 * 1024)]特性限制单文件上传大小（示例为限制最大10MB），同时增加文件扩展名校验，仅允许jpg、png、jpeg等指定格式的图片上传
• 确保CreateProductDto中的属性名、数据类型和前端FormData中append的字段一一对应，避免出现个别字段绑定为null的问题

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