0

我需要一点关于 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;
}
4

2 回答 2

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);
}
于 2013-04-23T19:45:20.297 回答
0

这是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 函数绑定以获取更多信息和交互式示例。

于 2013-09-15T22:28:07.093 回答