Почему мой 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> 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");
}
Если я удалю сообщение с результатом, все будет работать. Не уверен, почему это ошибка, но это другой вопрос.