angularjs - 穆尔特 - 错误 : Unexpected field

Question

当我尝试将我的多部分表单数据传递到后端时，我遇到了一个冗长的错误:

Error: Unexpected field
    at makeError (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/lib/make-error.js:12:13)
    at wrappedFileFilter (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/index.js:39:19)
    at Busboy.<anonymous> (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/lib/make-middleware.js:112:7)
    at emitMany (events.js:108:13)
    at Busboy.emit (events.js:182:7)
    at Busboy.emit (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/node_modules/busboy/lib/main.js:31:35)
    at PartStream.<anonymous> (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/node_modules/busboy/lib/types/multipart.js:208:13)
    at emitOne (events.js:77:13)
    at PartStream.emit (events.js:169:7)
    at HeaderParser.<anonymous> (/Users/****/Documents/Programming Projects/JavaScript/Angular/Back-Yard-Brewing/node_modules/multer/node_modules/busboy/node_modules/dicer/lib/Dicer.js:51:16)
    at emitOne (events.js:77:13)

我想我知道问题出在哪里，只是不知道如何解决。在我的代码中，我使用一个服务来附加我的多部分表单，然后将它发送到服务器。之后，我不知道图像到达服务器时的命名是什么。因此，与其将其命名为“图片”，不如将其命名为更具体的名称。问题是，我不知道是什么。这是我的代码:

前端

            <label>Beer Name</label></br>
            <input ng-model="recipe.alias"></br>
            <label>Image</label></br>
            <input type="file" file-model="recipe.image">
            <label>Category</label></br>
            <select ng-options="beer.alias as beer.alias for beer in beerTypes" ng-model="recipe.selectedCategory" ng-change="filterByCategory(selectedCategory)">
            </select></br>
            <label>Description</label></br>
            <textarea maxlength="500" ng-model="recipe.description" cols="50" rows="5" class="input-box"></textarea></br>
            <p>Character count: {{recipe.description.length}} out of 500</p>
            <label>Instructions</label></br>
            <textarea maxlength="1000" ng-model="recipe.instructions" cols="50" rows="5" class="input-box"></textarea></br>
            <p> Character count: {{recipe.instructions.length}} out of 1000 (Minimum: 500)</p> 
            <button ng-click="createRecipe()" class="button-color btn btn-default">submit</button></br>

Angular

$scope.recipe = {alias: null, selectedCategory: null, description: null, instructions: null, username: null, userID: null, image: null};

$scope.createRecipe = function(){
    authService.getUserInfo(function(user){
        // add the user information to the recipe
        $scope.recipe.username = user.username;
        $scope.recipe.userID = user._id;

    });
    multipartForm.post("/createrecipe", $scope.recipe);
}

angular.service

.service("multipartForm", ["$http", function($http){
    this.post = function(uploadUrl, data){
        var fd = new FormData();
        for(key in data){
            fd.append(key, data[key]);
        }
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {"Content-Type" : undefined}
        });
    }
}]);

服务器文件

var express = require("express");
var bodyParser = require("body-parser");
var session = require("express-session");
var multer = require("multer");
var upload = multer({ dest: "./uploads"})
var server = express();


var recipeController = require("./controllers/RecipeController")
var favRecipeController = require("./controllers/FavRecipeController")
var authenticationController = require('./controllers/Authentication');

var passportConfig = require('./config/passport');
var passport = require('passport');

//application configuration
//resave will keep it true

server.sessionMiddleware = session({
    secret            : "123iojojojoiklij",
    resave            : true,
    saveUninitialized : false,
    rolling           : true,
    cookie            : {maxAge: 60000 * 60}
});
server.use(server.sessionMiddleware);

//End Express Session Setup

server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: true }));
server.use(express.static(__dirname + "/public"));


server.use(passport.initialize());

server.use(passport.session());


server.post("/createrecipe", upload.single("picture"), recipeController.createRecipe);

感谢所有帮助。

Answer 1

好的，所以向白衣甘道夫和杉杉喊出答案:

事实证明，在我的 server.js 中，在我发送到服务器的帖子中，我的 single.upload("photo") 只需要是 single.upload("image"),，因为这是我在前端标记的内容。感谢您的所有帮助。

经验教训:即使您通过对象传递多部分表单，multer 仍会将其视为您最初标记的内容。