Question

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

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

那么如何将我的媒体发布到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}}"/>

角度控制器

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>

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

1 个答案: