Angulaire 2 encoder l'image en base64

Je veux encoder les fichiers téléchargés en base64 pour que je puisse les transmettre à la demande. Le problème est que je suis en utilisant Angulaire 2 avec la Machine et je n'arrivais pas à trouver des infos sur la façon de le faire. J'ai trouvé qu'en Javascript, il peut être fait avec de la toile, mais je ne sais pas comment pourrais-je mettre en œuvre le code en caractères d'imprimerie.

<input type="file" class="form-control" accept="image/*" multiple
    [(ngModel)]="spot.images" name="images">

source d'informationauteur Mantas | 2016-09-01

  1. 32

    Donc j'ai trouver la solution:

    compontent.ts

    changeListener($event) : void {
  this.readThis($event.target);
}

readThis(inputValue: any): void {
  var file:File = inputValue.files[0];
  var myReader:FileReader = new FileReader();

  myReader.onloadend = (e) => {
    this.image = myReader.result;
  }
  myReader.readAsDataURL(file);
}

    component.html

    <input type="file" accept="image/*" (change)="changeListener($event)">
  2. 6

    Voici la réponse ci-dessus, enveloppé dans une réutilisables, composant des liens dans ngmodel. 

    import { NgModule, Component, Input, Output, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormsModule } from "@angular/forms";
@Component({
selector: 'file-upload',
template:  `<input *ngIf="showFileNameInput" id="uploadFile" class="upload-file form-control" placeholder="Choose File" [(ngModel)]="selectedFileName" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>{{uploadButtonText}}</span>
<input type="file" class="upload" accept="*" (change)="changeListener($event)">
</div>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FileUploadComponent),
multi: true
}
]
})
export class FileUploadComponent implements ControlValueAccessor {
selectedFileName: string = null;
@Input() showFileNameInput: boolean;
@Input() uploadButtonText: string;
writeValue(value: any) {
//Handle write value
}
propagateChange = (_: any) => { };
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() { }
changeListener($event): void {
//debugger; //uncomment this for debugging purposes
this.readThis($event.target);
}
readThis(inputValue: any): void {
//debugger; //uncomment this for debugging purposes
var file: File = inputValue.files[0];
var myReader: FileReader = new FileReader();
myReader.onloadend = (e) => {
this.propagateChange(myReader.result);
this.selectedFileName = file.name;
}
myReader.readAsDataURL(file);
}
}
@NgModule({
declarations: [
FileUploadComponent
],
imports: [FormsModule],
exports: [
FileUploadComponent
]
})
export class FileUploadModule { }

    Qui peut être utilisée comme 

    <file-upload [showFileNameInput]="true" allowedTypes="image/*" uploadButtonText="Upload File" [(ngModel)]="someProperty"></file-upload>

    Aussi un peu de css qui l'a aidée à se fondre dans le bootstrap sur mon site

    /********************************/
/* File Upload */
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.upload-file {
&.form-control {
width: auto;
display: inherit;
}
}
  3. 1

    Vous pouvez créer une classe Wrapper pour la classe FileReader de retour d'un observable.Abonnez-vous pour elle et sur le succès de l'utilisation de l' .cible pour obtenir le base64 pour faire ce que vous voulez.

    import {ReplaySubject} from "rxjs/ReplaySubject";
import {Observable} from "rxjs/Observable";
export class ObservableFileReader {
constructor(){}
public readFile(fileToRead: File): Observable<MSBaseReader>{
let base64Observable = new ReplaySubject<MSBaseReader>(1);
let fileReader = new FileReader();
fileReader.onload = event => {
base64Observable.next(fileReader.result);
};
fileReader.readAsDataURL(fileToRead);
return base64Observable;
}
}