Angular7升级至Angular8后，图片上传至C# ApiController失效

我帮你排查了一下代码，发现几个可能导致后端接收不到文件的点，咱们一步步来看：

问题回顾 #

你提到Angular 7时文件上传功能正常，升级到Angular 8后，前端能正确获取文件名称和大小，但后端Api里httpRequest.Files.Count始终为0，无法拿到上传的文件。

关键代码问题分析 #

先看你的Angular组件TS代码里的一个明显错误：
你定义了fileData = new FileReader();，但在preview方法里却把event.files（这是一个FileList类型）赋值给了fileData。类型不匹配的赋值在Angular 8更严格的类型检查下，可能导致后续取this.fileData[0]时出现隐性问题——虽然前端控制台能看到文件信息，但实际传递给FormData的可能不是正确的File对象。

另外，Angular 8的HttpClient在处理FormData时，默认会自动设置正确的Content-Type: multipart/form-data并生成boundary，你的代码里没手动设置，这点暂时没问题；但后端用HttpContext.Current.Request.Files读取文件的方式，在ASP.NET Web Api中并不是最优解，容易出现解析问题。

具体修复步骤 #

1. 修正Angular前端的fileData类型 #

把fileData的定义从FileReader改成FileList，解决类型不匹配问题：

// 替换原来的错误定义
fileData: FileList | null = null;

然后在preview方法里正常赋值：

preview(event) {
  if (event.files.length === 0) {
    return;
  }
  // ... 保留原有的MIME类型、文件大小校验逻辑
  this.reader.readAsDataURL(event.files[0]);
  this.reader.onload = () => {
    this.imgURL = this.reader.result;
    this.fileData = event.files; // 现在类型完全匹配
    this._bottomSheetRef.containerInstance.enter();
  };
}

2. 增强FormData构造的可靠性 #

添加日志确认文件是否正确加入FormData，同时增加异常处理：

onSubmit() {
  this.loading = true;
  // 先校验文件是否存在
  if (!this.fileData || this.fileData.length === 0) {
    console.error("未选择任何文件");
    this.loading = false;
    return;
  }
  const formData = new FormData();
  formData.append('UploadedFile', this.fileData[0], this.fileData[0].name);
  formData.append('token', this.token);
  
  // 打印FormData内容，确认文件已添加
  for (let [key, value] of formData.entries()) {
    console.log(key, value);
  }

  this.http.post(PrivateZoneConstants.UploadUserImage, formData)
    .subscribe(res => {
      this.localStorageService.setItem('UserLoginClaims', res);
      this.fileUploaded = true;
      this.loading = false;
      this._bottomSheetRef.containerInstance.enter();
    }, error => {
      console.error("上传失败:", error);
      this.loading = false;
    });
  setTimeout(() => {
    this._bottomSheetRef.dismiss();
  }, 6000);
}

3. 优化后端ApiController的文件读取逻辑 #

在ASP.NET Web Api中，用标准的MultipartFormDataStreamProvider解析multipart请求，替换你当前的Action代码：

[HttpPost]
[AllowAnonymous]
public async Task<IHttpActionResult> UploadUserImage()
{
    // 校验请求类型是否为multipart/form-data
    if (!Request.Content.IsMimeMultipartContent())
    {
        return BadRequest("不支持的媒体类型，请上传图片");
    }

    try
    {
        // 设置临时存储路径（可根据业务需求修改）
        var tempPath = Path.GetTempPath();
        var provider = new MultipartFormDataStreamProvider(tempPath);
        
        // 异步读取multipart请求内容
        await Request.Content.ReadAsMultipartAsync(provider);

        // 获取上传的文件
        var uploadedFile = provider.FileData.FirstOrDefault();
        if (uploadedFile == null)
        {
            return BadRequest("未检测到上传的文件");
        }

        // 获取文件名称和临时路径
        var fileName = uploadedFile.Headers.ContentDisposition.FileName.Trim('"');
        var tempFilePath = uploadedFile.LocalFileName;
        
        // 获取token参数
        var token = provider.FormData.GetValues("token").FirstOrDefault();

        // 此处添加你的文件保存逻辑，比如复制到服务器指定目录...

        return Ok("文件上传成功");
    }
    catch (Exception ex)
    {
        return InternalServerError(ex);
    }
}

同时去掉[AcceptVerbs("GET", "POST", "OPTIONS")]——文件上传只需要POST请求，OPTIONS是CORS预请求，会由后端CORS中间件自动处理，无需在Action中声明。

额外检查点 #

• 确认跨域配置：如果前后端域名不同，后端需允许multipart/form-data类型的请求，确保CORS策略配置正确。
• 检查Angular拦截器：如果项目中配置了HTTP拦截器，确认它没有修改FormData请求的Content-Type或请求体内容。

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