使用json服务器rest api上传angular 7的头像

Question

​

​

我使用Json server和模块HttpClient创建了一个带有angular的crud应用程序，我在一个名为db.json的json文件中编写了一个contact对象。

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

但不幸的是，我不知道如何从带有angular的输入文件标签上传图像文件。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

要上传图像，您必须使用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];

 }

Answer 2

您需要创建一个自定义指令来转换要绑定到表单域的选定文件。

请检查此代码并将此指令添加到您的应用程序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。