Question

我上傳多個圖像到MongoDB使用multer。
我的前端部分是使用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代碼：

$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，基本思路如下所示

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