Question

我需要一些FileReader API的帮助。有没有办法从FileReader之外获取数据。我有一个方法的“类”，其中使用FileReader读取图像，我想将图像数据放入类本地变量（如下面的代码所示）。

我知道FileReader是异步工作的，我的解决方案是错误的。有什么方法可以让它发挥作用吗？谢谢。

CanvasState.prototype.addImage = function(inputFile) {
    var file = inputFile;
    var reader = new FileReader();
    reader.onload = this.loadImageData;
    reader.readAsDataURL(file);
}

CanvasState.prototype.loadImageData = function(e) {
    this.hasImage = true;
    this.imageData = e.target.result;
}

Answer 1

试试这个：

CanvasState.prototype.addImage = function(inputFile) {
    var file = inputFile, self = this;
    var reader = new FileReader();
    reader.onload = function(e) {
           self.hasImage = true;
            self.imageData = e.target.result;
       };

    reader.readAsDataURL(file);
}

Answer 2

这是在函数中设置this的方式的问题。当你这样做时：

    foo.bar();

this内的

bar()将为foo。但如果你这样做：

    var bar = foo.bar;
    bar();

this将成为全球对象。

在您的情况下，问题是当您设置reader.onload时，您将其设置为从CanvasState原型中拉出的函数。当阅读器加载然后调用该函数时，就像上面的例子this将成为全局对象，而不是addImage内的对象。

要解决此问题，您可以使用bind()方法创建新功能，并使用您期望的loadImageData来调用this。

基本上，改变：

...
reader.onload = this.loadImageData;
...

到：

...
reader.onload = this.loadImageData.bind(this);
...

查看JavaScript Function bind了解更多信息和互动示例。

如何从FileReader中获取数据

2 个答案: