Angular对接ASP.NET API无法上传4-10MB大文件求助

前端基于Angular开发，后端采用ASP.NET API提供文件上传服务。使用Postman上传4-10MB文件时后端可正常接收，但通过Angular上传超过4-6MB的文件就会失败，且失败情况与文件类型无关。

NSwag生成的前端上传代码 #

let url_ = this.baseUrl + 'api/uploadFile';
url_ = url_.replace(/[?&]$/, '');

const content_ = JSON.stringify(request);

let options_: any = {
  body: content_,
  observe: 'response',
  responseType: 'blob',
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }),
};

return this.http
  .request('post', url_, options_)
  .pipe(
    _observableMergeMap((response_: any) => {
      return this.processUploadFiles(response_);
    })
  )
  .pipe(
    _observableCatch((response_: any) => {
      if (response_ instanceof HttpResponseBase) {
        try {
          return this.processUploadFiles(response_ as any);
        } catch (e) {
          return _observableThrow(e) as any as Observable<DocumentMetadata[]>;
        }
      } else return _observableThrow(response_) as any as Observable<DocumentMetadata[]>;
    })
  );

错误信息 #

ERR_CONNECTION_RESET
APIException Error
 at new ZoneAwareError An unexpected server error occurred.

后端控制台响应 #

Application Insights Telemetry (unconfigured):
 {"name":"AppRequests","time":"2023-08-22T15:44:46.3217082Z","tags":{"ai.application.ver":"1.0.0.0","ai.cloud.roleInstance":"AFF-2302SN00693","ai.operation.id":"f0bfb1d8628785626a3b79bc9d1334f0","ai.operation.name":"POST
 /api/UploadFiles","ai.location.ip":"127.0.0.1","ai.internal.sdkVersion":"aspnet5c:2.21.0+5e2e7ddda9ec0e16a75b1ae0a37f6a13c777f5","ai.internal.nodeName":"AFF-2302SN00693"},"data":{"baseType":"RequestData","baseData":{"ver":2,"id":"daa4fdc4602c662f","name":"POST
 /api/UploadFiles","duration":"00:00:00.0319042","success":true,"responseCode":"307","url":"http://localhost:4202/api/UploadFiles","properties":{"_MS.ProcessedByMetricExtractors":"(Name:'Requests',
 Ver:'1.1')","DeveloperMode":"true","AspNetCoreEnvironment":"Dev-Local"}}}}

可能的解决方法 #

1. 修正请求内容格式与类型 #

当前代码用JSON.stringify(request)将文件转为JSON格式上传，且设置Content-Type: application/json，这是错误的文件上传方式：

• JSON格式不适合传输大文件，会导致请求体体积膨胀，触发浏览器或服务器的大小限制
• 文件上传标准格式应为multipart/form-data，Postman默认使用该格式，所以后端能正常接收

修改代码示例：

let url_ = this.baseUrl + 'api/uploadFile';
url_ = url_.replace(/[?&]$/, '');

// 改用FormData传递文件
const content_ = new FormData();
// 假设request里包含file对象，根据实际字段名调整
content_.append('file', request.file, request.file.name);

let options_: any = {
  body: content_,
  observe: 'response',
  responseType: 'blob',
  // 移除手动设置的Content-Type，浏览器会自动添加multipart/form-data及boundary
  headers: new HttpHeaders({
    'Accept': 'application/json',
  }),
};

return this.http
  .request('post', url_, options_)
  .pipe(
    _observableMergeMap((response_: any) => {
      return this.processUploadFiles(response_);
    })
  )
  .pipe(
    _observableCatch((response_: any) => {
      if (response_ instanceof HttpResponseBase) {
        try {
          return this.processUploadFiles(response_ as any);
        } catch (e) {
          return _observableThrow(e) as any as Observable<DocumentMetadata[]>;
        }
      } else return _observableThrow(response_) as any as Observable<DocumentMetadata[]>;
    })
  );

2. 检查ASP.NET Core的请求大小限制 #

确保后端配置了足够大的文件上传限制：
在Program.cs中添加以下配置：

builder.Services.Configure<Microsoft.AspNetCore.Http.Features.FormOptions>(options =>
{
    // 设置允许的最大请求体大小（示例为20MB）
    options.MultipartBodyLengthLimit = 20 * 1024 * 1024;
});

// 如果用了控制器，确保Action上的特性设置正确
[RequestSizeLimit(20 * 1024 * 1024)]
[RequestFormLimits(MultipartBodyLengthLimit = 20 * 1024 * 1024)]
public async Task<IActionResult> UploadFile(IFormFile file)
{
    // 上传逻辑
}

3. 处理307重定向问题 #

后端响应返回307状态码（临时重定向），可能是因为后端强制HTTPS，但Angular用HTTP请求调用，导致重定向过程中大文件上传失败：

• 开发环境下，可以临时关闭后端的HTTPS重定向：注释掉app.UseHttpsRedirection();
• 或者修改Angular的API baseUrl为HTTPS地址，确保请求和重定向地址一致

4. 排查Angular拦截器影响 #

检查是否有HTTP拦截器添加了超时、压缩或其他修改请求的逻辑，导致大文件上传被中断。可以临时禁用拦截器测试上传是否正常。

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