2015-01-05 71 views
1

我是新來的平均堆棧。我想知道如何通過AngularJS將圖像文件上傳到數據庫(貓鼬)。請如果你能提供一些代碼。我已經在網上搜索,我發現這個代碼,但它不工作對我來說如何上傳圖像並使用mean.js將其保存到數據庫(貓鼬)

HTML代碼:

<div class="col-md-4 col-xs-8"> 
    <div class="fileinput fileinput-new" data-provides="fileinput"> 
     <img class="profile-pic thumbnail" style="width: 200px; height: 150px;" /> 
     <div> 
      <span class="btn btn-default btn-file"> 
      <span class="fileinput-new upload-button"><span class="glyphicon glyphicon-upload"></span> Upload New Pic</span> 
      <input class="file-upload" type="file" data-ng-file-select="onFileSelect($files)" accept="image/png, image/jpeg" > 
      </span>     
     </div> 

     <span data-ng-if="uploadInProgress">Upload progress: {{ uploadProgress }}</span> 
     <img data-ng-src="uploadedImage" data-ng-if="uploadedImage"> 
     <br> 
    </div> 
</div> 

客戶方controller.js:

$scope.onFileSelect = function(image) { 
    console.log("image selected" + image); 
    if (angular.isArray(image)) { 
     image = image[0]; 
    } 

    // This is how I handle file types in client side 
    if (image.type !== 'image/png' && image.type !== 'image/jpeg') { 
     alert('Only PNG and JPEG are accepted.'); 
     return; 
    } 

    $scope.uploadInProgress = true; 
    $scope.uploadProgress = 0; 

    $scope.upload = $upload.upload({ 
     url: '/upload/image', 
     method: 'POST', 
     file: image 
    }).progress(function(event) { 
     $scope.uploadProgress = Math.floor(event.loaded/event.total); 
     $scope.$apply(); 
    }).success(function(data, status, headers, config) { 
     $scope.uploadInProgress = false; 
     // If you need uploaded file immediately 
     $scope.uploadedImage = JSON.parse(data);  
    }).error(function(err) { 
     $scope.uploadInProgress = false; 
     console.log('Error uploading file: ' + err.message || err); 
    }); 
}; 

我的問題甚至在選擇文件後控制器沒有觸發。我還保留了一個控制檯來測試,但它不起作用。

回答

相關問題