Request.Form.Files выдает «InvalidOperationException» ASP. NET Core 3.1 / Angular 8 - PullRequest
0 голосов
/ 26 февраля 2020

При попытке отладки или выполнения происходит сбой после ввода метода API и выполнения команды Request.Form.Files

Это мой html шаблон в Angular:

 <form [formGroup]="myForm" (ngSubmit)="updateDetails()" style="margin-top:50px;align-items: center;justify-content: center;" >
                  <div class="form-row" style="justify-content: center;">
                    <div class="form-group col-md-6">
                      <label for="Image">Image</label>
                      <input formControlName="image" name="Image" type="file" class="form-control" 
                      (change)="onFileChange($event)">
                    </div>
                  </div>
                  <div class="form-row" style="justify-content: center;">
                    <div class="form-group col-md-6">
                      <label for="JobPosition">Job Position</label>
                      <input formControlName="jobPosition" name="JobPosition" type="text" class="form-control" placeholder="Job Position" >
                    </div>
                  </div>
                  <div class="form-row" style="justify-content: center;">
                    <div class="form-group col-md-6">
                      <label for="City">City</label>
                      <input formControlName="city" name="City" type="text" class="form-control" placeholder="City">
                    </div>
                  </div>
                  <div class="form-row" style="justify-content: center;">
                    <div class="form-group col-md-6">
                      <label for="Description">Description</label>
                      <textarea formControlName="description" name="Description" type="text" class="form-control" placeholder="Description"> </textarea>
                    </div>
                  </div>
                  <div  class="form-row" style="justify-content: center;">

                    <button type="submit" class="btn btn-info btn-circle btn-xl"><i class="fa fa-check"></i>
                    </button>
                  </div>
                </form>

Это форма, в которую я передаю значения:

myForm = new FormGroup({
    city: new FormControl(''),
    jobPosition:new FormControl(''),
    description:new FormControl(''),
    image: new FormControl(''),
    imageSource: new FormControl('')
  });

Метод OnChangeFile, используемый при изменении загрузки файла

 onFileChange(event:any) {

if (event.target.files.length > 0) {
  const file = event.target.files[0];
  this.myForm.patchValue({
    imageSource: file
  });

  this.myForm.get('imageSource').updateValueAndValidity()

// File Preview
const reader = new FileReader();
reader.onload = () => {
  this.preview = reader.result as string;
}
reader.readAsDataURL(file)
}

}

Моя форма метод инициализации:

    updateDetails(){
      let input = new UserUpdateModel(this.myForm.get('jobPosition').value,this.myForm.get('city').value,this.myForm.get('description').value,this.myForm.get('imageSource').value);
      const formData = new FormData();
      formData.append('file',this.myForm.get('image').value);
      this.userService.updateUser(this.user.id,input,formData).subscribe((result)=>{
       this.alertify.success('Done !'); 
      },error=>{
        this.alertify.error('Error!');
      })

  }
}

метод обслуживания пользователя

updateUser(id:string,input:UserUpdateModel,formData:any){
  return this.http.post(this.baseUrl+id,input);
}

и метод API в ASP. NET CORE:

 [HttpPost("{id}")]
        public async Task<IActionResult> UpdateUser(string id, [FromBody]UserUpdateModel input)
        {

            var files = Request.Form.Files;
            var filePath = this.fileService.UploadFile(files);

            return Ok(); 


        }
...