Node.js multer Error: неожиданное поле, но имя совпадает

Question

Я пытался загрузить мультимедиа через несколько облачных систем, но каждый раз выдает ошибку. Я не могу понять, где ошибка и какая часть не так. имя ввода такое же, как в upload.any («имя»), и схема также такая же: [{url: String, format: String}],

ошибка

 MulterError: Unexpected field
 at wrappedFileFilter (/app/node_modules/multer/index.js:40:19)
 at Busboy.<anonymous> (/app/node_modules/multer/lib/make-middleware.js:114:7)
 at Busboy.emit (events.js:310:20)
 at Busboy.emit (/app/node_modules/busboy/lib/main.js:38:33)
 at PartStream.<anonymous> (/app/node_modules/busboy/lib/types/multipart.js:213:13)      
 at PartStream.emit (events.js:310:20)
 at HeaderParser.<anonymous> (/app/node_modules/dicer/lib/Dicer.js:51:16)
 at HeaderParser.emit (events.js:310:20)
 at HeaderParser._finish (/app/node_modules/dicer/lib/HeaderParser.js:68:8)
 at SBMH.<anonymous> (/app/node_modules/dicer/lib/HeaderParser.js:40:12)
 at SBMH.emit (events.js:310:20)
 at SBMH._sbmh_feed (/app/node_modules/streamsearch/lib/sbmh.js:159:14)
 at SBMH.push (/app/node_modules/streamsearch/lib/sbmh.js:56:14)
 at HeaderParser.push (/app/node_modules/dicer/lib/HeaderParser.js:46:19)
 at Dicer._oninfo (/app/node_modules/dicer/lib/Dicer.js:197:25)
 at SBMH.<anonymous> (/app/node_modules/dicer/lib/Dicer.js:127:10)

форма

<%- include('../partials/header') -%>
    <div class="container">
        <form action="/c" method="post" enctype="multipart/form-data">
            <h2 style="text-align: center;">Add video</h2>
            <div style="width: 30%; margin: 20px auto;">
                <div class="form-group"><input class="form-control" type="text" name="cat[name]" placeholder="name">
                </div>
                <div class="form-group">
                    <input class="form-control" type="number" name="cat[price]" placeholder="Price">
                </div>
                <div class="form-group">
                    <label for="video">Video</label>
                    <input type="file" name="campaa" id="video" accept="video/*,image/*">
                </div>
                <div class="form-group">
                    <input type="text" name="cat[description]" class="form-control" placeholder="description">
                </div>

                <div class="form-group">
                    <button class="btn btn-primary" type="submit">submit!!</button></div>
                <a href="/c">Go back</a>
            </div>
        </form>

    </div>
    <%- include('../partials/footer') -%>

почтовый маршрут

var express = require("express");
var router = express.Router();
var moment = require("moment");
var Campground = require("../models/campground");
var User = require("../models/user");
var middleware = require("../middleware");
var multer = require('multer');
var { cloudinary, storage } = require("../cloudinary");
var upload = multer({ storage });




router.post("/c", middleware.isloggedin, upload.any('campaa'), async function(req, res) {
    try {
        req.body.cat.campaa = [];
        for (const file of req.files) {

            req.body.cat.campaa.push({
                url: file.secure_url,
                format: file.format
            });
        }
        req.body.cat.author = {
            id: req.user._id,
            username: req.user.username
        }
        req.body.cat.created = new Date();
        const campground = await Campground.create(req.body.cat);

        res.redirect('/c/' + campground.id);
    } catch (err) {
        req.flash("error", err.message);
        res.redirect("back");
    }
});

Answer 1

При использовании multer убедитесь, что вы отправляете свои данные на сервер в виде составной формы. Я недавно прошел через эту загрузку данных из Angular внешнего интерфейса.

На стороне клиента мне пришлось добавить следующее:

public createMedia(media: Media) {   
   var formData: any = new FormData();
   formData.append("title", media.title);
   formData.append("author", media.author);
   formData.append("description", media.description);
   formData.append("datePublished", media.datePublished);
   formData.append("submittedBy", media.submittedBy);
   formData.append("media", media.media); //Here's my uploaded file. 

   return this.httpClient.post(`${this.apiURL}/media/`, formData, {
      reportProgress: true,
     observe: "events",
   });
 }