无法在 AngularJS 服务中返回 fileReader 结果的值答案

【问题标题】：Can't return value of fileReader result in AngularJS service无法在 AngularJS 服务中返回 fileReader 结果的值
【发布时间】：2023-03-31 08:45:01
【问题描述】：

我正在尝试编写一个从 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 返回空，如下所示：

如果我在fileReader.onload 中添加console.log(img.src)，它会打印出我想要的内容。似乎函数 openLocalImage 在分配给 e.target.result 之前返回了 img.src。

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

【问题讨论】：

标签： javascript angularjs image service controller

【解决方案1】：

这是因为 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);
    };

}]);

我们将传递一个callback 函数并接收img.src 作为它的参数。使用它

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

【讨论】：