使用 json server rest api 上传 angular 7 的个人资料图片答案

【问题标题】：upload profile picture with angular 7 using json server rest api使用 json server rest api 上传 angular 7 的个人资料图片
【发布时间】：2019-08-02 18:08:39
【问题描述】：

我通过使用带有模块 HttpClient 的 Json 服务器创建了一个带有 Angular 的 crud 应用程序我在 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);
 }
}

感谢您的帮助。

【问题讨论】：

标签： json angular typescript api server

【解决方案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

【讨论】：

【解决方案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];

 }

【讨论】：