MEAN Stack：如何将上传绑定到猫鼬模型？

Question

我正在我的 MEAN 应用程序（它是一个项目控制面板）中使用上传表单。我使用本教程来实现工作上传：http://markdawson.tumblr.com/post/18359176420/asynchronous-file-uploading-using-express-and

有了这个我可以上传文件 - 它们出现在我的上传文件夹中。
现在我想实现，上传链接到用户制作的项目。例如：Jon Doe 已登录，他上传了一张图片。现在我想呈现他的个人资料页面。我查询 Jon Doe 的项目模型 --> 现在我想要他上传的媒体文件。

那么我如何 post 我的媒体，到 Jon Doe 的 projectSchema？之后，在 Angular 中显示所有媒体的最佳方式是什么？

------编辑------

我一直在尝试使用 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}}"/>

Angular 控制器

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;
    });
});

路由：

    //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);
        });
    });

媒体架构

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

回答您的问题。

how do I post my media, to the projectSchema of Jon Doe?

在 Angular 中您想使用 $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/');
  };
});

Afterwards, whats the best way to display all the media in Angular?

假设您的端点工作正常。你只能做一个$http这次做一个get。

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>

MEAN Stack：如何将上传绑定到猫鼬模型？

MEAN Stack: How to bind uploads to a mongoose model?

file-upload

mongodb

node.js

gridfs

angularjs