загрузить изображение профиля с angular 7 с помощью json server rest api

Question

Я создал приложение crud с angular, используя сервер Json с модулем HttpClient. Я записываю контактный объект в файле json с именем db.json.

{"contact": [
{
  "name": "",
  "email": "",
  "phone": "",
  "image": "",
  "id": 1
},
{
  "name": "",
  "email": "",
  "phone": "",
  "image": "",
  "id": 2}]}

Но, к сожалению, я понятия не имею, как я могу загрузить файл изображения из тега входного файла с угловым. ContactCreateComponent позволяет мне использовать метод для создания импорта объекта контакта из restApiService.

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { RestApiService } from "../shared/rest-api.service";

@Component({
  selector: 'app-contact-create',
  templateUrl: './contact-create.component.html',
  styleUrls: ['./contact-create.component.css']
})
export class ContactCreateComponent implements OnInit {
  @Input() contactDetails = { name: '', email: '', phone:"",image:"" }
 
  constructor( public restApi: RestApiService, 
    public router: Router,) {
    }

  ngOnInit() {
  }
  addContact(dataContact) {
    this.restApi.createContact(this.contactDetails).subscribe((data: {}) => {
      this.router.navigate(['/contact-list'])
    })
  }
}

вот мой исходный код restApiService:

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Contact } from '../shared/contact';
import { Observable,throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class RestApiService {
  apiURL ="http://localhost:3000"
  constructor(private http:HttpClient) { }

  
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }  

  getContacts(): Observable<Contact> {
    return this.http.get<Contact>(this.apiURL + '/contact')
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }
  getContact(id): Observable<Contact> {
    return this.http.get<Contact>(this.apiURL + '/contact/' + id)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }  

  createContact(Contact): Observable<Contact> {
    return this.http.post<Contact>(this.apiURL + '/contact', JSON.stringify(Contact), this.httpOptions)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }  
  updateContact(id, Contact): Observable<Contact> {
    return this.http.put<Contact>(this.apiURL + '/contact/' + id, JSON.stringify(Contact), this.httpOptions)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }
  deleteContact(id){
    return this.http.delete<Contact>(this.apiURL + '/contact/' + id, this.httpOptions)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }


  handleError(error) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      // Get client-side error
      errorMessage = error.error.message;
    } else {
      // Get server-side error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
 }
}

Спасибо за вашу помощь.

Answer 1

Вам необходимо создать пользовательскую директиву для преобразования выбранных файлов, которые будут связаны, в поле формы.

Пожалуйста, проверьте этот код и добавьте эту директиву в ваше приложение https://gist.github.com/sheikalthaf/85c19d41bccf218d6bc962daa75a7943

После этого добавьте атрибут ngu-file-ref к вашему input[type="file"], затем проверьте значение формы, вы получите формат файла в поле

затем перед отправкой данных в api конвертируем их в formData https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Answer 2

Чтобы загрузить изображение, вы должны использовать FormData.

Способ обслуживания Как:

public uploadImage(image: File): Observable<Response> {
   const formData = new FormData();

   formData.append('image', image);

   return this.http.post('/api/v1/image-upload', formData);
 }

Вызовите этот метод, и объект файла передачи аргумента изображения будет взят из поля ввода.

Как:

var file = document.getElementById('myFile').files[0];

или при изменении события типа файла ввода вы можете сделать:

fileChangeEvent(event: any): void {
  let file =  event.target.files[0];

 }