Question

我在角度

中使用这样的东西

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

ANKUR，

我们可以用这种方式重写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变量

2 个答案: