Télécharger l'image avec HttpClient

Problème

J'ai essayer de télécharger une image avec angulaire du HttpClient API Content-Type: multipart/form-data (angulaire v4+). Est-il pris en charge? Comment faire?

Le téléchargement fonctionne avec XMLHttpRequest lors de l'utilisation de module comme ng2-fantaisie-image-uploader. Je préfère utiliser une méthode personnalisée avec HttpClient qui je pourrait mettre dans un service http ensemble avec d'autres méthodes pour accéder à l'API.

Voici ce que j'ai essayé jusqu'à présent:

modèle.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class ModelService {
  constructor(private http: HttpClient) { }

  public async updateAvatar(file: File): Promise<void> {

    //headers
    const headers = new HttpHeaders()
      .append('Content-Type', 'multipart/form-data');

    const formData: FormData = new FormData();
    formData.append('avatar', file, file.name);

    const response: HttpResponse = await this.http
      .patch('https://example.com/avatar', formData, { headers, observe: 'response' })
      .toPromise();

    console.log(response.status);
  }
}

avatar-uploader.composante.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ModelService } from './path/to/model.service';

@Component({
  selector: 'app-avatar-uploader',
  template: '<input type="file" #fileInput (changes)="uploadAvatar()">'
})
export class AvatarUploaderComponent implements OnInit {

  @ViewChild('fileInput') fileInputElement: ElementRef;

  constructor() { }

  ngOnInit() { }

  public async uploadAvatar() {
    const file: File = this.fileInputElement.nativeElement.files[0];

    await this.model.updateAvatar(file);
  }

}

Cette version envoie une demande (express) de l'API, mais multer (une bibliothèque pour l'analyse multipart/form-data demandes) ne parvient pas à analyser la demande.

Donc je suppose que je utiliser le HttpClient de manière incorrecte, ou qu'il ne prend pas en charge multipart/form-data demandes.

Je pense qu'on pourrait envoyer encodées en base64 fichier ou utiliser XmlHttpRequest, mais je demande spécifiquement sur HttpClientla capacité de le faire.

OriginalL'auteur mrkvon | 2017-09-05

  1. 13

    Pour moi, le truc, c'était de ne pas définir le type de contenu de type multipart/form-data. Mais c'est fait automatiquement pour moi.

    <label>
  <input type="file" (change)="setFiles($event)" style="display:none" multiple/>
  <a mat-raised-button color="primary">
    <mat-icon>file_upload</mat-icon>
    Select Documents
  </a>
</label>

    Voici mon code de téléchargement multipart/form-data. Pas besoin de définir les en-têtes.

    private setFile(event) {
    let files = event.srcElement.files
    if (!files) {
      return
    }

    let path = `${environment.celoApiEndpoint}/api/patientFiles`
    let data = {"patientData": {
      "uid": "",
      "firstName": "",
      "lastName": "",
      "gender": "Not Specified",
      "dateOfBirth": ""
    }}
    //let headers = new HttpHeaders()
    //  .set('content-type', 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW')
    //let headers = new HttpHeaders().set('content-type', 'multipart/form-data')
    const formData: FormData = new FormData();

    for (let i = 0; i < files.length; i++) {
      formData.append(i.toString(), files[i], files[i].name);
    }
    formData.append("data", JSON.stringify(data));
    this.http.post(path, formData).subscribe(
      (r)=>{console.log('got r', r)}
    )
  }
    Est FormData() de la croix-navigateur pris en charge? Qu'en est navigateur Safari?
    href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" >developer.mozilla.org/en-US/docs/Web/API/FormData
    Merci beaucoup, j'ai essayé de définir le chiffrement et ce genre de trucs dans les options et n'aurait jamais essayé de ne pas définir les options 🙂
    L'ajout de "Content-Type" ou "Accepter" à l'en-tête apportera de la douleur et de la souffrance: le téléchargement ne fonctionne pas... il reste encore une question est POURQUOI?!

    OriginalL'auteur robert king

  2. 0

    Je ne pense pas que le problème est angulaire, j'ai utilisé le même code pour envoyer un fichier sur le serveur (je suis à l'aide de printemps dans le backend), la seule différente est que je ne suis pas l'observation de la demande ou de la conversion de la réponse à la promesse.

    voir mon code ci-dessous

    let formData: FormData = new FormData();

formData.append('file', this.fileToUpload);

this.http.put(this.usersUrl , formData) .subscribe(
    data => {
        console.log(data); 
    },
    error => {
        console.log(error);
    }
);

    OriginalL'auteur Cristian J. Brito