encodage avec readAsDataURL pour envoi fichiers

Gregoire Yakeu
Javascript

Bonjour,

Bien le bonjour à tous, j'essaie depuis hier d'uploader une image  utilisant  readAsDataURL, le problème c'est que le fichier une fois encodé je ne parviens pas à le recupérer pour envoyer au serveur, la console chrome m'affiche undefinided pour le fichier encodé.

voilà mon code publication.ts:

import { Component, OnInit } from '@angular/core';
import { Publication } from './publication';
import { Base64 } from 'js-base64';
import {Router} from '@angular/router';
import { NgForm } from '@angular/forms';
import { PublicationService } from './publication.service';
import { Http, Headers, Response,  RequestOptions } from '@angular/http';

@Component({
  selector: 'app-publication',
  templateUrl: './publication.component.html',
  styleUrls: ['./publication.component.css']
})
export class PublicationComponent implements OnInit {
 publication: Publication;
 private url = 'http://localhost:8000/publication/1';

 constructor(private http: Http)  { }
  contenu: string;

  ngOnInit() {

  }

  selectedFile: File;

  onFileChanged(event) {
    this.selectedFile = event.target.files[0];

  }

  publier() {
    const headers = new Headers();
      headers.append('content-type', 'application/json');
      let options = new RequestOptions({ headers: headers });

      let image  ;

      let fichier = function getBase64(logFile){
      var reader = new FileReader();

      reader.onload = function(e) {
      reader.result;
       console.log(image);
    };

    image= reader.readAsDataURL(logFile);
    }

    let body = {
      urlPubli: image,
      content :this.contenu
    }

    console.log( body);

        return this.http.post(this.url, JSON.stringify(body), options ).subscribe(data =>{
          console.log(data);

        });

  }

}

publication.html:

  <form enctype="multipart/form-data" #userRegistrationForm="ngForm">
    <label for="contenu">Votre commentaire</label>
    <textarea name="contenu" id="contenu"  [(ngModel)]="contenu"  cols="30" rows="10"   class="form-control"></textarea>
    <label for="image">Selectionnez une image</label>
    <input type="file"  id="file"   class="form-control" (change)="onFileChanged($event)">
    <button  class="btn-large btn-submit" (click)="publier()" >Submit</button>
  </form>

L'erreur affichée:

{urlPubli: undefined, content: "kkkjkjkjkj"}
zone.js:2969 POST http://localhost:8000/publication/1 400 (Bad Request)

Quelqu'un peut il me dire où je fais fausse route?

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

Entourez votre code pour bien le mettre en forme

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

Aucune réponse