Angularjs 平均堆栈：如何将上传绑定到mongoose模型？

我在MEAN应用程序（它是一个项目控制面板）中玩弄上传表单。我使用本教程实现工作上传：

使用此功能，我可以上载文件-它们显示在我的上载文件夹中。
现在我想实现，上传链接到用户制作的项目。例如：Jon Doe登录后，他上传了一张照片。现在我想呈现他的个人资料页面。我查询Jon Doe-->的项目模型，现在我想查看他上传的媒体文件

那么，我如何将我的媒体发布到Jon Doe的

projectSchema

？之后，以角度显示所有媒体的最佳方式是什么

----编辑---

我一直在尝试使用扩展插件multer，我几乎成功地实现了上传的GET和POST。问题是，我无法从数据库中获取任何数据。我的控制台给了我一个

GET/uploads/media/[object%20Object]304

目标是：将

项目id

与文件一起写入mediaSchema。因此，当我打开一个项目时，我会得到与该项目的

项目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}}"/>

路由：

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

mediaSchema

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

---

回答你的问题

如何将我的媒体发布到Jon Doe的projectSchema

在某些情况下，您希望使用该服务。这很简单，你可以举个例子

HTML

之后，以角度显示所有媒体的最佳方式是什么

假设端点工作正常。您可以执行

$http

，但这次只能执行get

JS

HTML

{{photo}

我的回答对您有帮助吗？

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

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

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

});

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