AngularJSを使用してデータベースに投稿する前に画像をプレビューする方法は？

Question

multerを使用して複数の画像をMongoDBにアップロードしています。
私のフロントエンド部分はangular Jsを使って開発されました。
MongoDBに画像をアップロードすることができましたが、データベースにアップロードする前にHTMLページで画像をプレビューします。

HTMLコード：

<div class="col-md-4"> 
    <div class="input-group"> 
     <input type="file" name="file" id='file' multiple="multiple" required="required" /> 
    </div> 
</div> 

角度のJsコード：私は「しようとしたVEの何

$scope.upload = function() { 
      //var file = angular.element(document.querySelector('#file')).prop("files")[0]; 
       $scope.files = []; 
       $scope.uploadedFiles = []; 
       $scope.selectedFiles = []; 
       console.log('file length :' + angular.element(document.querySelector('#file')).prop("files").length); 
       for(var i = 0 ; i < angular.element(document.querySelector('#file')).prop("files").length ; i++){ 
        var file = angular.element(document.querySelector('#file')).prop("files")[i]; 
        console.log('file Name :' + file); 
        $scope.files.push(file); 
       } 
       console.log('Uploaded file :' + $scope.files); 
       // $scope.files.push(file); 
       $http({ 
        method: 'POST', 
        url: '/image/upload', 
        headers: { 'Content-Type': undefined }, 
        transformRequest: function (data) { 
         var formData = new FormData(); 
         formData.append('model', angular.toJson(data.model)); 
         for(var i = 0 ; i < data.files.length ; i++){ 
          formData.append('file', data.files[i]); 
          $scope.uploadedFiles.push(data.files[i]); 
         } 
         console.log('Sending File size :' + data.files.length); 
         //formData.append('file', data.files[0]); 
         return formData; 
        }, 
        data: { model: { title: 'hello'}, files: $scope.files } 

       }).then(function (res) { 

        console.log(res); 
       }); 
     } 

.then(function (res) { 
         $scope.selectedFiles = "/public/images/" + res.data.imagePaths[0]; 
} 

<div> 
Images :{{selectedFiles}}<img ng-src="{{selectedFiles}}"> 
</div> 

私はページをHTMLに選択したファイルを渡されたが、それは画像が表示されないです。
どうすればいいですか。

Answer 1

このplunker http://plnkr.co/edit/y5n16v?p=previewを確認してください、基本的な考え方は、これが探しているので、[0] `これが機能することはありません

fileReader.readAsDataUrl($scope.file, $scope) 
         .then(function(result) { 
          $scope.imageSrc = result; 
         });