angular - 如何处理 Angular 中的上传失败？

Question

我可以通过 POST 请求将文件上传到我的后端，当文件太大时它会返回一个 Http 400 状态代码。它在使用 Postman 时完美运行。

当我在浏览器 (chrome) 中执行此调用时，出现此错误:

zone.js:2933 POST http://localhost:8080/backend/rest/upload/ net::ERR_CONNECTION_ABORTED

因此，我的HttpErrorResponse 的状态代码为 0:

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

This答案解释了问题，但是我如何在 Angular 中处理这个问题？我指望我的 Http 400 响应中包含返回的错误消息...

Answer 1

我认为这更多是与您的 API 相关的问题，而不是与 Angular 本身相关的问题...您的 API 应该处理该问题并返回适当的 400 错误。

作为变通方法并改进您的用户界面，您可以在文件将其发布到后端之前对其进行 Angular 验证。如果太大，则屏蔽帖子并通知用户。

您可以像这样访问文件的大小属性:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" (change)="onChange($event)"/>
    </div>
  `,
  providers: [ UploadService ]
})
export class AppComponent {
  onChange(event) {
    var files = event.srcElement.files;
    console.log(files[0].size);
  }
}