कोणीय 2 एन्कोड छवि बेस 64

Question

पर मैं अपलोड की गई फ़ाइलों को बेस 64 पर एन्कोड करना चाहता हूं ताकि मैं उन्हें अनुरोध पर पास कर सकूं। समस्या यह है कि मैं टाइपस्क्रिप्ट के साथ कोणीय 2 का उपयोग कर रहा हूं और मुझे ऐसा करने के बारे में कोई जानकारी नहीं मिली। मैंने पाया कि जावास्क्रिप्ट में इसे कैनवास के साथ किया जा सकता है लेकिन मुझे नहीं पता कि मैं टाइपस्क्रिप्ट में कोड को कैसे कार्यान्वित कर सकता हूं।

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

Answer 1

तो मैं समाधान खोजने:

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

आप FileReader वर्ग इसके लिए और सफलता पर .target का उपयोग जो चाहें करें के लिए बेस 64 पाने के लिए एक observable.Subscribe वापस जाने के लिए के लिए एक आवरण वर्ग बना सकते हैं।

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

यहां पुन: उपयोग करने योग्य घटक में लिपटे ऊपर उत्तर है जो 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 { } 

कौन सा तरह

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

इसके अलावा कुछ सीएसएस कि मदद की यह मेरी साइट

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