通过 httpPost 上传大文件会在 Angular 14 中引发未知错误

Question

我有一个简单的 ractive 角度形式用于上传文件，并且有 ASP.core 用于后端。 通过 HTTP post 将文件发送到 api 大约 10 秒后会停止，仅当文件大于 10MB 左右时，才会返回代码为 0 的未知错误。小文件上传就可以了。

目前 ASP.NET API 在收到表单后仅返回一条消息，不进行任何处理。所以该文件甚至不会到达服务器。另外，使用 Postman 发送相同的大文件效果很好。并且后端的文件大小没有限制，因此问题必须出在客户端。

我什至使用this教程重写了代码。即使它与 Postman 一起使用，结果也是相同的，但我的角度应用程序失败了。

progress: number;
message: string;
@Output() public onUploadFinished = new EventEmitter();

constructor(private http: HttpClient) { }

uploadFile = (files: any) => {
 if (files.length === 0) {
   return;
 }
 let fileToUpload = <File>files[0];
  const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);

 this.http.post('https://localhost:44468/api/upload', formData, { reportProgress: true, 
  observe: 'events' })
    .subscribe({
     next: (event: any) => {
       if (event.type === HttpEventType.UploadProgress)
         this.progress = Math.round(100 * event.loaded / event.total);
      else if (event.type === HttpEventType.Response) {
         this.message = 'Upload success.';
         this.onUploadFinished.emit(event.body);
       }
     },
     error: (err: HttpErrorResponse) => console.log(err)
   });
}

模板：

<div class="row" style="margin-bottom:15px;">
 <div class="col-md-3">
  <input type="file" #file placeholder="Choose file" (change)="uploadFile(file.files)" style="display:none;">
  <button type="button" class="btn btn-success" (click)="file.click()">Upload File</button>
</div>
<div class="col-md-4">
  <span class="upload" *ngIf="progress > 0">
    {{progress}}%
  </span>
  <span class="upload" *ngIf="message">
    {{message}}
  </span>
 </div>
</div>

错误：

因此我不知道为什么会发生错误，也没有办法纠正它。 请记住，上传较小的文件没有问题。这不可能是 CORS 问题，因为它与邮递员一起使用并且设置了

AllowAnyOrigin() ...

。 我将很乐意感谢任何帮助。

Answer 1

1 - 增加 Angular 应用程序的客户端配置允许的最大文件大小。 Angular 可能对可上传的文件大小有默认限制，这可能会导致您遇到的错误。您可以通过将以下代码添加到您的 app.module.ts 文件来增加此限制：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: 'MAX_FILE_SIZE', useValue: 10000000 } // 10 MB
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2-检查网络问题或超时。成功上传较小文件的事实表明该问题可能与网络拥塞或超时有关。您可以尝试通过将以下代码添加到 uploadFile 函数来增加 HTTP 请求的超时值：

const httpOptions = {

  headers: new HttpHeaders(),
  reportProgress: true,
  observe: 'events',
  timeout: 120000 // 2 minutes
};

this.http.post('https://localhost:44468/api/upload', formData, httpOptions)
  .subscribe({
    next: (event: any) => {
      // ...
    },
    error: (err: HttpErrorResponse) => {
      console.log(err);
      if (err.name === 'TimeoutError') {
        // Handle timeout error
      } else {
        // Handle other errors
      }
    }
  });