无法在 fileReader.onload 函数中获取 $scope 变量

Question

我在 angular

中使用类似的东西

app.controller('techiesClub', function($scope, $http) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";

    $scope.asdf = "ankur";
    $scope.uploadImage = function () {
        alert($scope.asdf);            ////////////WORKS WELL
        var filesSelected = document.getElementById("upload").files;
        if (filesSelected.length > 0) {
          var fileToLoad = filesSelected[0];

          var fileReader = new FileReader();

          fileReader.onload = function(fileLoadedEvent, ss) {
            var srcData = fileLoadedEvent.target.result; // <--- data: base64

             $scope.asdf = srcData;   //////////////////NOT WORKING

          }
          debugger;
          fileReader.readAsDataURL(fileToLoad, $scope);
        }
    }
});

像这样对输入的 onchange 使用 uploadImage 方法

<input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage()">

我无法将 srcData 即 base64 数据获取到我可以在其他地方使用的变量中。

Answer 1

安库尔，

我们可以这样重写html。

 <input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage(this);">

此处为 JS 片段。我正在尝试使用 Blob 版本。

$scope.uploadImage = function ($event) {
    alert($scope.asdf);            ////////////WORKS WELL
    var filesSelected = $event.files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];
      var _ULR = window.URL || window.webkitURL;
      var img = new Image();
      img.onload = function() {
        var srcData = this.src; // <--- data: blob
         $scope.asdf = srcData;   //////////////////NOT WORKING
      };debugger;
      img.src =_ULR.createObjectURL(fileToLoad);   

    }
}

Answer 2

我认为您遗漏了解决方案中的关键点。我只是改变了您访问 base64 内容的方式。应该可以。

$scope.uploadImage = function () {
    alert($scope.asdf);            ////////////WORKS WELL
    var filesSelected = document.getElementById("upload").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileReader.result; // <--- data: base64

         $scope.asdf = srcData;   //////////////////NOT WORKING

      }
      debugger;
      fileReader.readAsDataURL(fileToLoad);
    }
}

无法在 fileReader.onload 函数中获取 $scope 变量

Unable to get $scope variables inside the fileReader.onload function

filereader

angularjs