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

debugcn 发表于 Dev

马库斯

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

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

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);
  }

马库斯

我发现了这个问题……我的后端返回了一个错误：“位置 2 处的 JSON 中的意外令牌 f”我试图在我的 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");

    }

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。