Как загрузить изображение, используя angular 8 - PullRequest
Новая
       26

Как загрузить изображение, используя angular 8

0 голосов
/ 15 апреля 2020

app.module.ts 

 ngOnInit() {
this.userForm = this.fb.group({
  firstName : ['', Validators.required],
  gender : ['', Validators.required],
  maritalStatus : ['', Validators.required],
  lastName : ['', Validators.required],
  dob : ['', Validators.required],
  nationality : ['', Validators.required],
  pic : [''],
  streetAddress : ['', Validators.required],
  city : ['', Validators.required],
  postalCode : ['', Validators.required],
  phone : ['', Validators.required],
  state : ['', Validators.required],
  country : ['', Validators.required],
  email : ['', Validators.required],
  jobTitle : ['', Validators.required],
  dateOfJoining : ['', Validators.required],
  department : ['', Validators.required],
  employeeStatus : ['', Validators.required],
  kra : ['', Validators.required],
  assignedSupervisor : ['', Validators.required],
  assignedSubordinate : ['', Validators.required],
  workExperience : ['', Validators.required],
  skills : ['', Validators.required],
  education : ['', Validators.required],
  password : ['', Validators.required]
})
}

onSubmit() {
this.submitted = true;
this.userService.addUser(this.userForm.value).subscribe(
  res => {
    this.model = res
    console.log(res)
  },
  error => {
    this.error = error,
    console.log(error)
  }
)

app.component. html

<div class="col-lg-12 col-12 mt-2">
 <label for="pic">Profile Picture</label><br/>
 <input type="file" formControlname='pic' name='pic'/>
</div>

app.service.ts 

addUser(formData: User) {
return this.http.post<User>(`${this.serverUrl}`, formData).pipe(
  catchError(this.handleError)
);

}

Eveything работает нормально. Я просто хочу знать, как загрузить pi c в angular 8. Pi c загружает в бэкэнд с использованием узла, проверенного на почтальоне. Может ли кто-нибудь помочь мне, как я могу загрузить pi c, используя angular, пожалуйста, помогите мне

1 Ответ

0 голосов
/ 15 апреля 2020

Перед отправкой запроса на конвертацию конвертируйте formData в фактический FormData, как описано здесь: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData.

Используйте 

addUser(formData: User) {
  const body = new FormData();
  for(const [key, value] of Object.entries(formData)){
     if(key === 'pic'){
        body.append(key, value)
     }
     body.append(key, `${value}`)
  }
  return this.http.post<User>(`${this.serverUrl}`, body).pipe(catchError(this.handleError);
);

Тогда ваш Бэкэнд должен распознать файл. К сожалению, FormData ожидает string или blob в качестве типа данных для значения.

Хотя указано:

Если отправленное значение отличается от String или BLOB-объект будет автоматически преобразован в строку: (...)

мой редактор (против кода) говорит мне не использовать число, а сначала преобразовать его.

Решение предполагает, что типы данных других свойств внутри User являются примитивами.

...