Javascript 很慢？ 将图像文件转换为 base64 时

Question

我正在使用此代码进行基本的图像上传

$scope.fileChanged = function () {
    var fileuploader = angular.element("#uploadFile");   
    var reader = new FileReader();
    reader.onload = function () {
        var image = document.getElementById("image");
        image.src = reader.result;
        image.style.opacity = 1;
        $scope.image = reader.result; 
    };
    var files = fileuploader[0].files;
    reader.readAsDataURL(files[0]);
    fileuploader.trigger('click');
};

html

<input type="file" ng-show="false" id="uploadFile" accept="image/*"
       onchange="angular.element(this).scope().fileChanged()" required>

当用户选择一个图像文件时，它会出现在 HTML 和集合的$scope.image 。

用户选择图像后，该图像将显示在 HTML image.src = reader.result; . 运行良好，速度快。

但是， $scope.image = reader.result; 执行大约需要 8 秒。 为什么图像 src 设置很快，但设置一个简单的字符串很慢？

即使只有很少的 KB 图像，也需要花费很多时间..

编辑：

// 图像显示非常快

<img src="../../../assets/img/gamification-icon.png" id="image"
     ng-click="uploadPicture()"> 

// 这需要很多秒才能出现

 <div class="col-md-6">{{image}}</div>

Answer 1

数据 URL 已过时，因为它们消耗时间和内存。

改用对象 URL：

var image = document.getElementById("image");
image.src = URL.createObjectURL(files[0]);

对象 URL 效率更高，速度更快。

有关更多信息，请参阅

• MDN Web API 参考 - URL.createObjectURL()