带有 jquery 个步骤向导和 bootstrap 个文件上传器的 nodejs multer

Question

我在 jquery 向导中上传多个文件时遇到问题。该向导包含多个正确发送到服务器（nodejs）的字段，但似乎无论我做什么，文件都是未定义的。

下面是一些代码片段：

<form id="wodcreate" class="steps-validation" action="#" enctype="multipart/form-data">

...

<div class="form-group">
    <div class="col-lg-10">
        <input type="file" id="images" name="images" class="file-input" accept="image/*" multiple="multiple">
        <span class="help-block" data-i18n="general.Only-images-allowed">Only images are allowed. Maximum size of each image is 5 MB, and there is a maximum of 10 images.</span>
    </div>
</div>

...

app.post('/api/user/create', upload.any(), function (req, res, next) {
    //Pass the logic to a dedicated function
    console.log(req.body);
    console.log(req.files);
    res.json({success : "Updated Successfully", status : 200});
});

我在发布到服务器时使用 formdata，因为我使用向导，所以我不使用 jquery 上传器按钮，而是使用以下方法将图像添加到 formdata：

$('#images').on('filebatchpreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
    response = data.response, reader = data.reader;

$.each(files, function (key, value) {
    if(value != null){
        formData.append("images", value, value.name);
    }
});

向导中的 onFinished 函数如下所示：

onFinished: function (event, currentIndex) {

    var res = $(".steps-validation").valid();
    var model_data = $(".steps-validation").serializeArray();

    //For all normal input fields
    $.each(model_data,function(key,input){
        formData.append(input.name,input.value);
    });
    //For videolist (li nonform fields):
    $('#videolist li').each(function(){
        formData.append('videolist[]',$(this).attr("id"));
    });

    //For wysiwyg
    var desc = CKEDITOR.instances.desc.getData();
    formData.append('desc',desc);

    if (res == true) {
        jQuery.ajax({
            type: "POST",
            url: "/api/user/create",
            data: formData,
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            success: function (data) {
                if(data.status == 200){

                }
            }
        });
    }
    return res;
}

Answer 1

经过一段时间后，我终于弄清楚错误是由于函数造成的：

$('#images').on('filebatchpreupload')

没有被触发。

带有 jquery 个步骤向导和 bootstrap 个文件上传器的 nodejs multer

nodejs multer with jquery steps wizard and bootstrap fileuploader

jquery

node.js

twitter-bootstrap

multer