当存在enctype属性时，"name "属性的值没有被发送到表单中（Express, Mongo, Node）。

Posted 2021-03-19

编辑：我玩了一圈，发现删除ENCTYPE属性可以让数据发送。我想我的 新的 问题将是："我如何克服enctype阻止我的数据发送的问题？"我如何克服enctype阻止数据发送的问题？"

我目前正在做一个应用程序，我正在研究一个创建路由。

我遇到的问题是，我正在做的一个表单的信息没有从 "name "标签中向创建路由发送信息。

下面是练习的模式。

const   mongoose    = require('mongoose'), 
        User        = require('./user');

const exerciseSchema = new mongoose.Schema({
    name: { 
        type: String, 
        required: "This field cannot be left blank"
    }, 
    image: String, 
    imageId: String, 
    description: String, 
    author: {
        id: {
            type: mongoose.Schema.Types.ObjectId, 
            ref: "User"
        },
        username: String
    }, 
    comments: [
        {
            type: mongoose.Schema.Types.ObjectId, 
            ref: "Comment"
        }
    ], 
    slug: {
        type: String, 
        unique: true, 
        trim: true
    }, 
    recommends: [
        {
            type: mongoose.Schema.Types.ObjectId, 
            ref: "User"
        }
    ], 
    reference:[{
        authors:String,  
        year: String, 
        title: String, 
        journal: String, 
        edition: String, 
        pageStart: Number,
        pageEnd: Number
    }], 
    muscle: String
});

exerciseSchema.pre('save', async function(next){
    try{
        if(this.isNew || this.wasNew){
            this.slug = await generateUniqueSlug(this._id, this.name); 
        }
        next();
    } catch(err){
        console.log(err.message); 
    }
});

var Exercise = mongoose.model("Exercise", exerciseSchema); 
module.exports = Exercise; 

async function generateUniqueSlug(id, exerciseName, slug){
    try{
        if(!slug){
            return slug = slugify(exerciseName); //added return   
        }
        var exercise = await Exercise.findOne({slug:slug}); 
        if(!exercise || exercise._id.equals(id)){
            return slug; 
        }
        var newSlug = slugify(exerciseName); 
        return await generateUniqueSlug(id, exerciseName, newSlug); 
    } catch(err){
        console.log(err.message); 
    }
}

function slugify(text){
    var slug = text
    .toString()
    .toLowerCase()
    .replace(/s+/g, '-')        // Replace spaces with -
    .replace(/[^w-]+/g, '')    // Remove all non-word chars
    .replace(/--+/g, '-')      // Replace multiple - with single -
    .replace(/^-+/, '')          // Trim - from start of text
    .replace(/-+$/, '')          // Trim - from end of text
    .substring(0, 75);           // Trim at 75 characters
    return slug + "-" + Math.floor(1000 + Math.random() * 9000) //Add 4 random digits to improve uniqueness
}

module.exports = mongoose.model('Exercise', exerciseSchema);

下面是一个创建路径

router.post('/', (req, res)=>{
    Exercise.create(req.body.exercise, (err, newlyCreate)=>{
        if(err){
            console.log(req.body.exercise); //undefined
            return res.redirect("back");  
        }
        console.log(newlyCreate); 
        res.redirect("/exercises"); 
    }); 
}); 

最后，下面是用户创建练习的表单。

<div class="row">
    <form class="w-75 m-auto" action="/exercises" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label>Name</label>
            <input class="form-control" type="text" name="exercise[name]">
        </div>
        <div class="form-group">
            <label for="image">Images</label>
            <input type="file" name="image" id="image" accept="image/*"> 
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea class="form-control" name="exercise[description]" rows=5 placeholder="Provide detail about the type of population, what you're targeting, cues, and the usefullness of this exercise..."></textarea>
        </div>
        <div class="form-group">
            <label for="muscle">Primary muscle targeted</label>
            <select class="form-control" name="exercise[muscle]" id="muscle">
                <option>Soleus</option>
                <option>Gastrocnemius</option>
                <option>Tibialis Anterior</option>
                <option>Sartorius</option>
            </select>
        </div>
            <div id="references">
                <!-- References will go here -->
            </div>
            <a class="newRef" href="#">Add Reference</a>
        <div class="form-group">    
            <input class="btn btn-primary w-100" id="submitExercise" type="submit" value="Submit">
        </div>
    </form> 
</div>


<a href="/exercises">Go back</a>



<script>
    var newRefButton = document.querySelector('.newRef');
    var references  = document.querySelector('#references');
    var ref = document.querySelector('.reference-group');  
    var list = 0    
    newRefButton.addEventListener('click', ()=>{
        var div = document.createElement('div');
        div.innerhtml = `
            <div class="form-group">
                <input type="text" name="exercise[reference][${list}][authors]" placeholder="Surname, Initials., Surname, Initials., Surname, Inials." class="form-control authorName">
            </div>
            <div class="form-group">
                <input type="text" name="exercise[reference][${list}][title]" placeholder="Title of Article" class="form-control">
            </div>
            <div class="form-group">   
                <input type="text" name="exercise[reference][${list}][journal]" placeholder="Journal" class="form-control">
            </div>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <input type="text" name="exercise[reference][${list}][year]" placeholder="Year" class="form-control">
                </div>
                <div class="form-group col-md-3">
                    <input type="number" name="exercise[reference][${list}][edition]" placeholder="Edition" class="form-control">
                </div>
                <div class="form-group col-md-3">
                    <input type="number" name="exercise[reference][${list}][pageStart]" placeholder="Start Page" class="form-control"> 
                </div>
                <div class="form-group col-md-3">
                    <input type="number" name="exercise[reference][${list}][pageEnd]" placeholder="End Page" class="form-control">
                </div>
            </div>
        `; 
        references.appendChild(div);
        list++ 
    }); 
</script>

• 我已经安装了 bodyParser (最新版本)，我正确地从另一个表格接收信息。