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

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

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

在AngularJS方面，我尝试在multer服务器端使用ng文件上传。我在上传文件方面做得很好，但仅此而已。但经过数百次测试，我绝望了。这里是我没有上传文件的原始代码的摘录

服务器端 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);

节.服务器.控制器

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

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

            }]);

节.服务器.路由

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

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

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

客户端 节.客户端.模块

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

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

节.客户端.控制器

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

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

            }]);

区段.客户端.路由

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

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

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

部分.客户端.服务

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

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

创建节.客户端.视图

<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>

但是我从来没有在邮件中通过AngularJS请求传递过这个文件

---

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

您是否希望代码能够随图像一起提交表单数据，然后在上载文件后将其他数据与图像名称一起保存在mongodb中？非常感谢您的关注，结果应该是一样的？但是，在mongoDBeven中存储其他数据和图像路径之前，也许我应该先上传图像（像这样，我可以先在表单中显示），而不存储图像。您可以向用户显示一个片段，即使您决定先上传，也会更容易，只需将图像名称作为响应从节点发送回前端，然后将其与其他数据一起发送。现在告诉我你到底想要什么，特别是因为你已经粘贴了很多代码，现在到了确切的痛点。：）非常感谢你的回答。我在我的ngResource服务中找到了一个FormData处理的解决方案，然后使用基于multer的上传中间件发布请求。因此，数据是随我的文件一起提交的。您是否希望代码可以随图像一起提交表单数据，然后在上载文件后，将其他数据与图像名称一起保存在mongodb中？非常感谢您的兴趣，结果可能是相同的？但是，在mongoDBeven中存储其他数据和图像路径之前，也许我应该先上传图像（像这样，我可以先在表单中显示），而不存储图像。您可以向用户显示一个片段，即使您决定先上传，也会更容易，只需将图像名称作为响应从节点发送回前端，然后将其与其他数据一起发送。现在告诉我你到底想要什么，特别是因为你已经粘贴了很多代码，现在到了确切的痛点。：）非常感谢你的回答。我在我的ngResource服务中找到了一个FormData处理的解决方案，然后使用基于multer的上传中间件发布请求。所以，数据随我的文件一起提交。