Javascript Can'；在AngularJS服务中返回fileReader结果的值

我正在尝试编写一个从HTML输入元素读取图像文件的服务。我希望此服务从读取的图像文件（base64字符串）返回具有更新属性的HTML img对象。我现在的服务是：

.service('ReadLocalImageService', [function () {

    this.openLocalImage = function (file) {
        var img = document.createElement("img");
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            img.src = e.target.result;
        };
        fileReader.readAsDataURL(file);
         return img.src;
    };

}]);

在本例中，

img.src

返回为空，如下所示：

如果我将

console.log（img.src）

放在

fileReader.onload

中，它会打印出我想要的内容。函数

openLocalImage

似乎在

e.target.result

分配给它之前返回

img.src

---

我无法解决这个问题，也无法找到关于这个问题的正确主题。谁能帮我解决这个问题或解释一下为什么它不工作？

这是因为img还没有加载。这里有一个解决方案

.service('ReadLocalImageService', [function () {

    this.openLocalImage = function (file, callback) {
        var img = document.createElement("img");
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            img.src = e.target.result;
            callback(img.src);
        };
        fileReader.readAsDataURL(file);
    };

}]);

我们将传递一个

回调

函数，并接收

img.src

作为其参数。使用它

ReadLocalImageService.openLocalImage(myImage, function(imgSrc) {
    // use imgSrc
});