javascript中未执行filereader.onload内部的功能

Question

我正在使用filereader读取文件，并使用base64执行一些操作。我可以读取该文件并获取base64，但无法使用它进行某些操作。这是我的代码。

问题是this.addContentAttachment（this.mimeType，this.base64Url）行中的代码未执行

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

由于上下文（this）更改，它在onload回调中失败。JavaScript在本地更改回调中的上下文。在您的情况下，onload this与相同reader。您必须绑定正确的上下文。

解决方案1 您可以通过在该函数上使用bind方法为传递的函数选择合适的上下文。

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

}

解决方案2 可以通过self回调的父作用域中的变量来解决相同的问题。我们使用自变量存储正确的上下文，然后在回调中而不是标准中使用它（“损坏”此变量）。

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

}

解决方案3（感谢@AlekseyL。）TypeScript可以通过自己的语法自动执行解决方案2。您可以尝试在游乐场中查看结果，它的作用与解决方案2中所述相同，但变量名为_this而不是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);
    };

}