Я не смог сделать эту работу ...

Инструменты

  • HTML5
  • Css
  • Bootstrap 3.x.x
  • NodeJS (экспресс, мультитер)
  • Jquery

Проблема

Похоже, что запись регистрируется, но req.files не заполняется, и в мою папку для загрузки не помещаются никакие изображения.

JS

$(document).ready(function () {
    var form = $('#ajax-new-post');

    form.submit(function (e) {

        //stop submit the form, we will post it manually.
        e.preventDefault();

        var formMessages = $('#form-messages');

        // Create an FormData object
        var data = new FormData(form[0]);

        // If you want to add an extra field for the FormData
        //data.append("CustomField", "This is some extra data, testing");

        // disabled the submit button
        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/posts/new",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            })
                .done(function (response) {
                    // Make sure that the formMessages div has the 'success' class.
                    $(formMessages).removeClass('alert alert-danger');
                    $(formMessages).addClass('alert alert-success');

                    console.log('Success: ' + response);

                    // Set the message text.
                    $(formMessages).text(response);

                    // Clear the form.
                    $('#title').val('');
                    $('#image').val('');
                    $('#upload-file-info').removeClass('btn-blk');
                    $('#upload-file-info').val('');
                    $('#post').val('');
                    $('#category').val('');
                })
                .fail(function (data) {
                    // Make sure that the formMessages div has the 'error' class.
                    $(formMessages).removeClass('alert alert-success');
                    $(formMessages).addClass('alert alert-danger');

                    // Set the message text.
                    if (data.responseText !== '') {
                        $(formMessages).text(data.responseText);
                    } else {
                        $(formMessages).text('Oops! An error occured and your message could not be sent.');
                    }
                });
        });

});

HTML

<div id="form-messages"></div>
<form id="ajax-new-post" enctype="multipart/form-data" method="post" action="/posts/new" class="wpcf7-form">

    <!--<label for="name">Name:</label>-->
    <div class="field">
        <input type="text" id="title" name="title" placeholder="Title" required>
    </div>
    <div class="e-divider-2"></div>
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="category" class="text-align-left" name="category" placeholder="Category" style="float: left;" required>
        </div>
        <div class="col-md-6">
            <input type="file" id="image" name="image" accept="image/*" size=1>
        </div>
    </div>
    <div class="e-divider-1"></div>
    <div class="field">
        <!--<label for="message">Message:</label>-->
        <textarea id="content-mrkdwn" name="content_mrkdwn" placeholder="Post" rows="40" required></textarea>
    </div>
    <div class="e-divider-2"></div>
    <div class="field text-center">
        <button id="btnSubmit" type="submit" class="btn btn-lg btn-blk">Create Post</button>
    </div>
</form>

Сторона сервера

let uploading = multer({
    dest: __dirname + /public/uploads/images/'
}).single('image');

app.post('/posts/new', uploading, (req, res) => {
    console.log(req.body);  // Outputting Non-Multipart Data
    console.log(req.files); // Outputting Undefined

    res.status(202).send('Post Successfully Made');
});

Есть предположения???

0
canaan seaton 28 Май 2017 в 06:30

2 ответа

Лучший ответ

Когда вы используете upload.single(), как сказано в документации для нескольких пользователей, результирующий файл должен быть в req.file, а не в req.files. См. Документ здесь.

Например

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

< Сильный > .single ( имя_поля )

Примите один файл с именем fieldname. Один файл будет сохранен в req.file.

1
abdulbarik 28 Май 2017 в 04:06

Для .single() файла это просто req.file. Если вы настроите его на множественность, затем это req.files.

1
mscdex 28 Май 2017 в 03:52