Question

我这个问题已经过去了好几天。当我尝试单击更新图像按钮时，会发生以下情况我在第一次尝试时无法进行图像更新，尽管我的console.log它返回了正确的值。发生的事情是，当我第一次加载更新按钮时向后端发出请求时，它总是返回之前的图像blob，当我再次尝试时，它返回我尝试在图像中执行的图像的blob前一刻并插入DB。总之，他总是有一个迟到的请求，我没有做到最少，因为。我已经尝试添加$ scope。 $ Apply（）并没有用。

First update the blob of the previous image

Second update the blob correct of the image

简而言之，我需要做两次更新才能将图像更改为我想要的图像。

代码：

function uploadFile(){
    var file = $scope.profilePic;
    var blob = new Blob([file], {
        "type": "text/html"
    });

    var reader = new FileReader();

    reader.onload = function(e) {
        $scope.text = e.target.result.split(',')[1];
        $scope.loadedUser.profilePic = $scope.text;
    }

    reader.readAsDataURL(blob);

};

HTML

<div layout-gt-sm="row" style="margin-bottom: 20px;">                                                    
    <input type="file" name="profilePic" fileread="profilePic"> 
</div>

APP：

app.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            }); 
        } 
    }
}]);

Answer 1

部分问题是该指令使用与隔离范围的双向=绑定。需要使用摘要周期将数据从隔离范围传输到父范围。

一种方法是使用表达式&绑定并将文件公开为local：

<div layout-gt-sm="row" style="margin-bottom: 20px;">
    <input type="file" name="profilePic" fileread="profilePic = $file">
</div>

app.directive("fileread", function () {
    return {
        scope: {
            //fileread: "="
            fileread: "&"
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                var file = changeEvent.target.files[0];
                scope.fileread({$file: file});
                scope.$apply()
            }); 
        } 
    }
});

在上面的示例中，当发生更改事件时，该指令将评估由fileread属性定义的Angular表达式，并将文件公开为$file。 $file值可立即用于父作用域，而无需观察程序（和摘要循环）将值从隔离范围传输到父作用域。

另一个问题是reader.onload事件发生在AngularJS框架之外，需要$scope.$apply()来处理对范围的更改。有关详细信息，请参阅SO: FileReader onload only works the second time around in browsers。

Reader.onload将图像文件上传到blob angularjs

1 个答案: