Почему мой Angular 6 httpClient POST-запрос срабатывает дважды

Я загружаю изображения с моего внешнего интерфейса Angular на серверный веб-интерфейс C#, и POST-запрос в службе вызывается дважды, хотя служба вызывается только один раз.

Отладка выполняется, и сервис вызывается только один раз, но в Fiddler видны 2 почтовых запроса и вкладка сети в инструментах разработки браузера.

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

1 ответ

Решение

Я обнаружил проблему.... мой сервер возвращал ошибку: "Неожиданный токен f в JSON в позиции 2" Я пытался сделать следующее в моем контроллере веб-API C#:

    [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");

    }

Если я удалю сообщение с результатом, все будет работать. Не уверен, почему это ошибка, но это другой вопрос.

Другие вопросы по тегам