Question

我很想在Angular中编写指令，并且正在跟随文件上传者的egghead教程，并设法让我的文件上传器与express / multer一起工作。我有这个非常奇怪的行为 - 一旦选择了文件，其中一个丑陋的默认图像会出现：

当我点击“上传”时，一切都很好（当然除了Kim Kardashian）：

这是我的角度代码。我认为服务器端的一切正常：

控制器/指令：

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'路由返回的数据？

更新：

感谢@jontewks，我想通了。出于某种原因，我宣布$scope.imageData = null

在我的控制器顶部。一旦我删除它，它工作！

Answer 1

在你上传之前图片没有显示的原因是在$ scope上寻找{{imageData}}但是在http.post的.success发生之前这是不可用的。在上传之前查看是否有办法使用文件数据，这将解决问题。

图像上传指令angular js

1 个答案: