MEAN Stack: Как связать загрузки в модель мангуста?

Question

Я играю с формами загрузки в своем приложении MEAN (его панель управления проектами). Я использовал этот учебник для реализации рабочей загрузки: http://markdawson.tumblr.com/post/18359176420/asynchronous-file-uploading-using-express-and

С этим я могу загружать файлы - они появляются в моей папке загрузки.
Теперь я хочу достичь того, что загрузка связана с проектом, созданным пользователем. Например: Jon Doe вошел в систему, он загружает картинку. Теперь я хочу отобразить его страницу профиля. Я запрашиваю мою модель проекта для Jon Doe -> теперь я хочу, чтобы файлы мультимедиа были загружены им.

Итак, как я размещаю свои носители, на projectSchema Jon Doe? Впоследствии, каков наилучший способ отображения всех носителей в Angular?

------ Edit ------

I've пытался Обращаясь с расширением multer, и я чуть не удалось сделать GET и POST раздач работы. Проблема в том, что я не могу получить данные из базы данных. Моя консоль дает мне GET /uploads/media/[object%20Object] 304.

Цель: Написание project_id, с файлами в mediaSchema. Поэтому, когда я открываю проект, я получаю все медиа, соответствующие project_id этого проекта. Я обновил свой код для вас:

HTML Форма

<form id="uploadForm" 
     enctype="multipart/form-data" 
     action="/uploads/" 
     method="post"> 
    <label for="project_id">Ihre Projekt ID</label> 
    <input type="text" name="project_id" value="{{projects._id}}" readonly>     
    <input type="file" name="userPhoto"/> 
    <button type="submit">Hochladen</button>   
</form> 
<hr> 
     <img ng-src="{{media.img}}"/> 

Угловая контроллер

var app = angular.module('myApp', []); 
var projectId = 
app.controller('projectCtrl', function($scope, $http) { 
    $scope.myVar = false; 
    $scope.toggle = function() { 
     $scope.myVar = !$scope.myVar 
    }; 
    $http.get('/profile/project/').then(function (res){ 
     $scope.projects = res.data; 
     var projectId = $scope.projects._id; 
    }); 
    //GET Media 
    $http.get('/uploads/media/'+projectId).then(function(data){ 
     console.log('Medien-Daten erhalten'); 
     $scope.media = data; 
    }); 
}); 

Routing:

//FILE HANDLING FOR PROJECTMEDIA 
    var Media = require('./models/media.js'); 
    //GET all the media 
    app.get('/uploads/', function(req, res, next){ 
     Media.find(function (err, media){ 
      if (err) return next (err); 
      res.json(media); 
     }); 
    }); 
    //GET one item 
    app.get('/uploads/media/:projectId', function(req, res, next){ 
     Media.findOne(req.params , function (err, media){ 
      if (err) return next (err); 
      res.json(media); 
     }); 
    }); 

mediaSchema

var mongoose = require ('mongoose'); 

var mediaSchema = mongoose.Schema({ 
     img   : {data: Buffer, contentType: String}, 
     project_id : String, 
     updated_at : {type: Date, default: Date.now } 
}); 

projectSchema

var projectSchema = mongoose.Schema({ 
     author  : String, 
     name  : String, 
     description : String, 
     tags  : String, 
     updated_at : {type: Date, default: Date.now }, 
     active  : {type: Boolean, default: false} 
}); 

Answer 1

Чтобы ответить на ваши вопросы.

как я размещаю свои СМИ, к проектуSchema Jon Doe?

В Угловом вы хотите воспользоваться услугой $http. Это очень просто, примером для вас будет.

HTML

<input id="filebutton" name="filebutton" file-model="myFile" class="input-file" type="file"> 
<br> 
<button ng-click="postForm()" id="singlebutton" name="singlebutton" class="btn btn-primary">Upload</button> 

APP

var app = angular.module('jsbin', []); 

//we need to use this directive to update the scope when the input file element is changed. 
app.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(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

//use a service to handle the FormData upload. 
app.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('userPhoto', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
      //all done! 
     }) 
     .error(function(){ 
     }); 
    }; 
}]); 

app.controller('DemoCtrl', function($scope, $http, fileUpload) { 
    $scope.postForm = function(){ 
    console.log($scope.myFile); 
    // Run our multiparty function. 
    fileUpload.uploadFileToUrl($scope.myFile, '/upload/'); 
    }; 
}); 

Затем, Что лучший способ, чтобы отобразить все СМИ в Угловом?

Предполагая, что ваша конечная точка работает правильно.Вы можете сделать $http только на этот раз.

JS

// make the request 
$http.get('/your/media').then(function(response){ 

    //add to scope 
    $scope.myMedia = response.data; 

}); 

HTML

<div ng-repeat="photo in myMedia">{{photo}}</div>