javascript - 上传前的 AngularJS 图像预览显示所选的上一张图像

Question

    myApp.directive('fileModel', ['$parse', function($parse) {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;
    element.bind('change', function(e) {
      $scope.$apply(function(e) {
        modelSetter($scope, element[0].files[0]);
      });
      $scope.setimage();
    });
  }

上面的代码是我的指令。

在函数$scope.setimage()中

     $scope.setimage = function() {
  var file = $scope.myFile;
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    $scope.ImageSrc = e.target.result;
  }
}

每当我选择文件时，

  <img width= 250 height=350 ng-src="{{ImageSrc}}"/>
  <input type=`enter code here`"file" file-model="myFile"/>

预览不会立即出现。当我第二次选择时，会出现先前选择的图像文件的预览。不知道出了什么问题。

Answer 1

您可以在 myFile 上使用 $scope.$watch，而不是 element.bind('change', ...)，如下所示:

$scope.$watch('$scope.myFile', function(e) {
  $scope.$apply(function(e) {
    modelSetter($scope, element[0].files[0]);
  });
  $scope.setimage();
});

请注意，需要定义 $scope.myFile 才能发生这种情况，因此，如果指令中未定义它，则需要将其添加到 Controller 中。