javascript - 图像上传指令Angular js

Question

我是用 Angular 编写指令的新手，一直在关注有关文件 uploader 的蛋头教程，并设法让我的文件 uploader 与express/multer 一起使用。不过，我有一个非常奇怪的行为——一旦选择了文件，就会出现那些丑陋的默认图像之一:

当我点击“上传”时，一切都很好(当然除了 Kim Kardashian):

这是我的 Angular 代码。我认为服务器端一切正常:

Controller /指令:

angular.module('MyApp')
  .controller('ProfileCtrl', function ($scope, $http, $rootScope, Profile) {
    // $rootScope.currentUser = user;
    $scope.user = $rootScope.currentUser;
    $scope.name = $scope.user.name;
    $scope.imageData = null;
    $scope.pictures = $scope.user.facebook ? $scope.user.facebook.pictures : $scope.imageData;

    // console.log($scope.user);
    $scope.filesChanged = function (elm) {
      $scope.files = elm.files;
      $scope.apply();
    };

    $scope.upload = function () {
      var fd = new FormData();
      angular.forEach($scope.files, function (file) {
        fd.append('file', file);
      });

      $http.post('upload', fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }

      }).success(function (data) {
        $scope.imageData = data;
        console.log($scope.imageData);
      });
    };
  })
  .directive('fileInput', ['$parse',
    function ($parse) {
      return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
          elm.bind('change', function () {
            $parse(attrs.fileInput)
              .assign(scope, elm[0].files);
            scope.$apply();
          });
        }
      };
    }
  ]);

html:

<center>
    <h3>Your Profile</h3>
</center>
<h4 class="col-sm-2 sidebar">{{name}} </h4>
<div class="col sm-2 col-sm-offset-2 sidebar" ng-if="user.facebook">
    <img data-ng-src="{{pictures}}">
</div>
<div>

    <br> Change Your Profile Picture:
    <br>
    <form ng-controller="ProfileCtrl">
        <input type="file" file-input="files" multiple />
        <button ng-click="upload()">Upload</button>
        <li ng-repeat="file in files">{{file.name}}
        <img src="data:image/png;base64,{{imageData}}">
        <button ng-click="saveImage()">
            Save New Profile Picture
        </button>
        </li>
    </form>
</div>

除了这个具体问题之外，我还没有从高层次上理解该指令的目的是什么。为什么我不能对 multer 中的“/upload”路由返回的数据进行 ng-repeat？

更新:

感谢@jontewks，我明白了。由于某种原因，我声明了 $scope.imageData = null

在我的 Controller 顶部。一旦我删除它就起作用了!

Answer 1

在您点击上传之前图像不会显示的原因是，正在 $scope 上查找 {{imageData}}，但在 http.post 的 .success 发生之前该图像不可用。看看是否有办法在上传之前使用文件数据来解决问题。