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

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

有了这个我可以上传文件 – 他们出现在我的上传文件夹。
现在我想实现，上传链接到用户所做的项目。 例如：Jon Doe已经login，他上传了一张照片。 现在我想呈现他的个人资料页面。 我查询了我的项目模型Jon Doe – >现在我想要他上传的媒体文件。

那么，我怎么把我的媒体发布到Jon Doe的projectSchema ？ 之后，在Angular中展示所有媒体的最佳方式是什么？

– – – 编辑 – – –

我一直试着用扩展器，我几乎设法使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); }); }); 

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

回答你的问题。

我怎么把我的媒体发到Jon Doe的projectSchema？

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

之后，在Angular中展示所有媒体的最佳方式是什么？

假设你的端点工作正常。 你可以做一个$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>