为什么我的 Angular 6 httpClient POST 请求触发了两次

Question

我正在从我的 Angular 前端上传图像到 C# web api 后端，并且服务中的 POST 请求调用了两次，尽管只调用了服务一次。

调试通过，只调用了一次服务，但在Fiddler中看到2个post个请求，在浏览器的Dev tools中看到网络选项卡

HTML:

<form [formGroup]="uploadForm" (ngSubmit)="upload()" >
  <input id="cin" name="cin" type="file" (change)="fileChangeEvent($event)" 
    placeholder="Upload a file..." multiple />

  <button type="submit" class="btn btn-success btn-s">
    <i class="glyphicon glyphicon-open-file"></i>&nbsp;Upload
  </button>
</form>

组件：

export class UploadCreateComponent implements OnInit {
  public uploadForm: FormGroup;
  public successMessage: string;
  public errorMessage: string;
  selectedFile: File;
  files: Array<File> = [];

  constructor(fb: FormBuilder, private service: UploadService, private cd: ChangeDetectorRef) {
    this.uploadForm = fb.group({
      files: [null, Validators.required]
    });
  }

  ngOnInit() {
  }

  upload() {
    const files: Array<File> = this.files;
    if (files.length === 0) {
      this.errorMessage = 'Please select some files';
      return;
    }
    this.service.createUpload(files).subscribe(event => {
      console.log(event);
      this.successMessage = 'Success';
    }, (error) => {
      console.error(error);
      this.errorMessage = 'Error: ' + error;
    });
  }

  fileChangeEvent(fileInput: any) {
    this.files = <Array<File>>fileInput.target.files;
  }
}

服务：

public createUpload(files: any): Observable<any> {
    let input = new FormData();
    for (let i = 0; i < files.length; i++) {
      input.append('files', files[i]);
    }
    return this.http.post(this.baseUrl + 'api/Upload/PostImage', input);
  }

Answer 1

我发现了问题....我的后端返回错误： "Unexpected token f in JSON at position 2" 我试图在我的 C# web api 控制器中执行以下操作：

    [HttpPost, Route("PostImage"), DisableRequestSizeLimit]
    public async Task<IActionResult> PostImage(List<IFormFile> files)
    {
        if (files == null || files.Count == 0)
        {
            return BadRequest("Invalid files");
        }

        var imageUploadCount = await _context.UploadFile(files);
        if(imageUploadCount > 0)
        {
            var resultMessage = string.Format($"{imageUploadCount} file(s) uploaded successfully.");
            return Ok(resultMessage);
        }
        return BadRequest("No files uploaded");

    }

如果我删除结果消息，一切正常。不知道为什么会出错，但那是另一个问题。

为什么我的 Angular 6 httpClient POST 请求触发了两次

Why is my Angular 6 httpClient POST request firing twice

angular-httpclient

angular6