Angular 2 kodieren Bild zu Base64

Question

Ich möchte die hochgeladenen Dateien zu Base64 zu kodieren, so dass ich sie an die Anfrage übergeben kann. Das Problem ist, dass ich Angular 2 mit Typescript benutze und ich konnte keine Informationen finden, wie man das macht. Ich habe festgestellt, dass es in Javascript mit Canvas gemacht werden kann, aber ich weiß nicht, wie ich den Code in Typescript implementieren könnte.

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

Answer 1

So finde ich die Lösung:

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)"> 

Answer 2

Sie können eine Wrapper-Klasse erstellen für die Filereader-Klasse ein observable.Subscribe für sie und auf Erfolg nutzen die .TARGET zurückzukehren, um die base64 für tun bekommen, was Sie wollen.

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; 
    } 
} 

Answer 3

Hier ist die Antwort oben in einer wiederverwendbaren Komponente verpackt, die in ngmodel bindet.

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 { } 

, die wie

verwendet werden können

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

auch einige CSS, die es in Bootstrap auf meiner Website mischen half

/********************************/ 
/* 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; 
    } 
}