Angular 2 codifica la imagen en base64

Este grupo de especialistas despúes de muchos días de trabajo y de recopilar de información, obtuvieron la solución, queremos que resulte de gran utilidad para tu trabajo.

Solución:

Así que encuentro la solución:

componente.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);

componente.html

Aquí está la respuesta anterior envuelta en un componente reutilizable que se vincula con 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:  `
                

                    uploadButtonText
                    
                
`,
    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  

Que se puede usar como

También algo de css que lo ayudó a integrarse en bootstrap en mi sitio

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

Puede crear una clase Wrapper para que la clase FileReader devuelva un observable. Suscríbase y, si tiene éxito, use .target para obtener la base64 para hacer lo que quiera.

import ReplaySubject from "rxjs/ReplaySubject";
import Observable from "rxjs/Observable";

export class ObservableFileReader 

  constructor()

  public readFile(fileToRead: File): Observable
    let base64Observable = new ReplaySubject(1);

    let fileReader = new FileReader();
    fileReader.onload = event => 
        base64Observable.next(fileReader.result);
    ;
    fileReader.readAsDataURL(fileToRead);

    return base64Observable;
   

valoraciones y reseñas

---

---

Utiliza Nuestro Buscador