Funktion in filereader.onload wird nicht ausgeführt in Javascript

Question

Ich lese die Datei mit FileReader und mit der Base64, um etwas Aktion durchzuführen. Ich kann die Datei lesen und base64 bekommen, aber ich konnte das nicht benutzen, um etwas zu tun. Hier ist mein Code.

Das Problem ist der Code in der Zeile this.addContentAttachment (this.mimeType, this.base64Url) nicht

getBase64(file: any) { 
    var reader:FileReader = new FileReader(); 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType,this.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

    } 

Answer 1

ausgeführt wird es nicht in dem onload Rückruf aufgrund veränderten Kontext (this). JavaScript ändert nativ den Kontext im Callback. In Ihrem Fall in onload this ist das gleiche wie reader. Sie müssen den richtigen Kontext binden.

LÖSUNG 1 Sie können den richtigen Kontext an die übergebene Funktion übergeben, indem Sie die Methode bind für diese Funktion verwenden.

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType, this.base64Url); 
    }.bind(this); // We forced that when function will be called this will be current this. 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

} 

Lösung 2 Dasselbe von self Variable in geordneten Bereich von Callback gelöst werden würde. Wir verwenden die Selbstvariable, um den richtigen Kontext zu speichern, und dann verwenden wir sie im Callback anstelle von Standard ("korrumpiert" dies).

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 

    var self = this; // create self with right this 
    reader.onload = function (readerEvt: any) { 
     var binaryString = readerEvt.target.result; 
     self.base64Url = binaryString; // using self instead this 
     self.mimeType = self.base64Url.substring(self.base64Url.lastIndexOf("data") + 5, self.base64Url.lastIndexOf(";")); 
     self.base64Url = self.base64Url.substring(self.base64Url.lastIndexOf("base64") + 7); 
     self.addContentAttachment(self.mimeType, self.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

} 

Lösung 3 (dank @Aleksey L.) Maschinenschrift können Lösung 2 durch ihre eigene Syntax automatisieren. Sie können das versuchen und das Ergebnis in playground sehen, es tut dasselbe wie in Lösung 2 beschrieben, aber Variable heißt _this anstelle von self.

getBase64(file: any) { 
    var reader: FileReader = new FileReader(); 
    reader.onload = (readerEvt: any) => { 
     var binaryString = readerEvt.target.result; 
     this.base64Url = binaryString; 
     this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";")); 
     this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7); 
     this.addContentAttachment(this.mimeType, this.base64Url); 
    }; 

    reader.readAsDataURL(file); 

    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 

}