2017-04-19 79 views
0

我在上載jQuery嚮導中的多個文件時遇到問題。 該向導包含多個正在發送到服務器(nodejs)的字段,但似乎無論我做什麼,這些文件都是未定義的。nodejs multer jquery步驟嚮導和引導文件上載器

下面是一些代碼片段:

<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; 
} 

回答

0

一段時間後,我終於想通了,錯誤的功能,是由於:

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

沒有被觸發。