Question

我连续几天浏览了数百页而没有成功，这是我的问题。

我使用MEAN堆栈，此时我有一个简单的表单，可以很好地将“name”字段保存到MongoDB集合中。现在，我想在客户端添加图像上传，并在表单提交时将图像存储在我的服务器上，最后将“名称”字段和图像路径保存到MongoDB集合。

AngularJS方面，我尝试使用multer服务器端的ng-file-upload。我已经做好了上传文件的操作，但仅限于此。但经过数百次测试，我绝望了。这是我原始代码的摘录，没有文件上传。

服务器端

sections.server.model

var mongoose = require('mongoose'),
Schema = mongoose.Schema;

var SectionSchema = new Schema({
    name: {
        type: String,
        default: '',
        trim: true,
        required: true,
        unique: true
    },
    image: {
        type: String,
        default: ''
    }
});
mongoose.model('Section', SectionSchema);

sections.server.controller

exports.create = function (req, res) {
    var section = new Section(req.body);
    section.save(function (err) {
        if (err) {
            return res.status(400).send({
                message: getErrorMessage(err)
            });
        } else {
            res.json(section);
        }
    });
};

sections.server.routes

var sections = require('../../app/controllers/sections.server.controller');

module.exports = function (app) {
    app.route('/api/sections')
        .post(sections.create);
};

客户端

sections.client.module

'use strict';
var sections = angular.module('sections', []);

sections.client.controller

'use strict';
angular.module('sections')
    .controller('SectionsController',
        ['$scope', '$routeParams', '$location', 'Sections'
            function ($scope, $routeParams, $location, Sections) {
                $scope.create = function () {
                    var section = new Sections({
                        name: this.name
                    });

                    section.$save(function (response) {
                        $location.path('sections/' + response._id);
                    }, function (errorResponse) {
                        $scope.error = errorResponse.data.message;
                    });
                };

            }]);

sections.client.routes

angular.module('sections').config(['$routeProvider', function ($routeProvider) {
            $routeProvider
                .when('/sections', {
                    controller: 'SectionsController',
                    templateUrl: 'sections/views/list-sections.client.view.html'
                })
                .when('/sections/create', {
                    controller: 'SectionsController',
                    templateUrl: 'sections/views/create-section.client.view.html'
                })
                .otherwise({
                    redirectTo: '/'
                });
        }]);

sections.client.service

'use strict';
angular.module('sections').factory('Sections', ['$resource', function ($resource) {
    return $resource('api/sections/:sectionId', {
        sectionId: '@_id'
    }, {
        update: {
            method: 'PUT'
        }
    });
}]);

创建-section.client.view

<section>
    <h1>New Article</h1>   
    <form data-ng-submit="create()" novalidate>
        <div>
            <label for="name">Nom du rayon</label>  
            <div>
                <input type="text" data-ng-model="name" id="name" placeholder="Name" required>
            </div>
        </div>  
        <div>
            <input type="submit">
        </div>
        <div data-ng-show="error"><strong data-ng-bind="error"></strong></div>
    </form> 

</section>

现在，有人可以帮我在表单中添加图片上传，然后在MongoDB中保存字段名称和图片路径。

请注意，我想在我的应用的其他形式中重复使用上传机制。我有想法在路边服务器中切换一个通用的中间件函数，调用multer并将图像路径返回到我的sections.create函数，用于MongoDB存储，类似：

module.exports = function (app) {
    app.route('/api/sections')
        .post(uploads.upload, sections.create);

但我从未设法从AngularJS请求中传递POST文件。

非常感谢您的所有想法，帮助以及可能有效的代码示例。

如何使用带有MEAN堆栈的AngularJS发布文件和数据

服务器端

客户端

0 个答案: