javascript - 使用回调 Angular 5 在异步加载中获取变量

Question

我正在尝试使用 FileReader 上传图像并返回其 src。

fileUpload(event) {
    var fr = new FileReader();
    fr.onload = function() {
      getImgSrc(fr.result)
    }
  }

getImgSrc(src) {
  console.log(src);
}

这将返回找不到名称“getImgSrc”

但是，如果我执行 this.getImgSrc(fr.result) ，我会收到错误 getImgSrc 在类型“MSBaseReader”上不存在，当然是因为 this 的上下文。如何访问方法 getImgSrc 以返回我的异步变量？

Answer 1

尝试使用 ES6 lambda 箭头语法在处理程序中保留 this 的上下文。

fileUpload(event) {
    var fr = new FileReader();
    fr.onload = () => this.getImgSrc(fr.result);    
  }

getImgSrc(src) {
  console.log(src);
}

关于没有记录任何内容，请尝试定位 FileReader.onload 的结果通过以下方式将事件传递给 onload:

fileUpload(event) {
    var fr = new FileReader();
    fr.onload = (event) => this.getImgSrc(event);    
  }

getImgSrc(event) {
  console.log(event.target.result);
}

希望有帮助!