使用Angular.js上传后无法显示图像

Question

我有一个问题。从Angular.js中选择ng-file-upload后，我无法显示图像。我必须在这里上传多个文件。我在下面解释我的代码。

<div ng-repeat="mul in mulImage">
    <div class="input-group bmargindiv1 col-md-12">
      <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
      <div>

        <input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" custom-on-change="uploadFile" ngf-select="onFileSelect($index,$file);">
        <div style="clear:both;"></div>

      </div>
      <span class="input-group-btn" ng-show="mulImage.length>0">
      <img ng-src="{{attchImage}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null">
            <input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
       </span>
    </div>
  </div>

我的控制器端代码如下所示。

$scope.uploadFile = function(event) {
    console.log('event', $scope.mulImage.length);
    var files = event.target.files;
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.onload = $scope.imageIsLoaded;
      reader.readAsDataURL(file);
    }
  };
  $scope.imageIsLoaded = function(e) {
    $scope.$apply(function() {
      $scope.attchImage = e.target.result;
    });
  }

我需要在选择图像后，它应该显示在图像标签内，但未能这样做。 Here is my plunkr代码。请帮我解决这个问题。

Answer 1

您在视图中使用了'onFileSelect'并定义了$ scope.onFileSelect1。 如果我编辑它，plunkersample将为我运行。 或者我错过了什么？