如何解析通過ajax請求發送的multipart/form-data。？

Question

我試圖解析從$.ajax()發送的多部分/表單數據，並且在服務器端數據進入req.body而不是req.files，如express的文檔中所述。

我所試圖做的是通過$.ajax通過nodemailer發送多個圖像文件和表單數據，然後接受它在服務器端和發送這些圖片作爲附件，所以要通過nodemailer送了它我需要能夠讀取，我得到的只是req.body中的數據垃圾，我甚至無法讀取。代碼如下。

客戶端AJAX請求發送功能： -

$('.contact-button').on('click', function(e) { 
    e.preventDefault(); 
    var data = new FormData(); 

    var filesList = document.getElementById('files'); 
    for (var i = 0; i< filesList.files.length; i ++) { 
     data.append('file', filesList.files[i]); 
    } 

    data.append('messageData', $('#contact-form').serialize()); 

    $.ajax({ 
     url: '/api/contactus/', 
     data: data, 
     processData: false, 
     type: "POST", 
     contentType: 'multipart/form-data', 
     mimeType: 'multipart/form-data', 
     success: function (data) { 

      console.log("SUCCESS IN AJAX"); 
      console.dir(data); 
     }, 
     error: function (err) { 
      console.log('error in AJAX'); 
      console.log(err); 
     } 
    }); 
}); 

服務器端API處理請求： -

function contactUs (req, res, next) { 

    console.log("TESTING Body "); 
    console.dir(req.body); 

    console.log("TESTING Files"); 
    console.dir(req.files); 

    var Transport = email.createTransport("SMTP", { 
     service: "Gmail", 
     auth: { 
      user: "dummy@dummy.com", 
      pass: "dumy1234" 
     } 
    }); 

    Transport.sendMail({ 
     host : "smtp.gmail.com", 
     port : "587", 
     domain : "domain.com", 
     to  : "dummy@dummy.com", 
     from : "dummy@dummy.com", 

     subject : "[Technical Support] "+EmailInfo.Name + " Submitted an Issue!", 
     reply_to: req.body.Email, 
     html : "<h2 >Message Details</h2>", 
     authentication : "login", 
     username: 'dummy@dummy.com', 
     password: 'dumy1234' 
    }, function (err, result) { 
     if (err) { 
      next('email sending failed', err); 
     } else { 
      res.json('email sending Success'); 
     } 
    }); 
} 

所以這兩個問題是如何解析多的數據來通過ajax請求。 秒如何通過nodemailer將多部分數據作爲附件發送。

請記住我已經嘗試使用app.use(express.multipart());，但是當我將它插入到我的app.js中時，它給了我400 bad request，甚至沒有執行contactUs函數。

Answer 1

使用contentType: false爲我解決了很多問題，只爲那些正在尋找相同問題的答案的人，這裏是工作和更新的代碼。

客戶端JS： -

submitHandler: function (form) { 
     if(isClicked) { 
      $('#result').removeClass('alert-success').addClass('alert-error').html("Ticket Already submitted").show(); 
      return false; 
     } 
     isClicked = true; 
     var data = new FormData(); 
     data.append('messageData', $('#contact-form').serialize()); 
     var filesList = document.getElementById('files'); 
     for (var i = 0; i < filesList.files.length; i ++) { 
      data.append('file', filesList.files[i]); 
     } 
     $.ajax({ 
      url:   '/api/contactus/', 
      data:  data, 
      processData: false, 
      type:  'POST', 
      contentType: false, 
      success:  function (data) { 
       $('#contact-form').html('<p><span>Thank You for contacting us!</span><br> We will get back to you very soon.<br> Your Ticket No. is <strong>'+data.TokenId+'</strong> </p><br><button class="btn btn-primary close-button" type="submit">Submit Another Ticket</button>'); 
      }, 
      error:  function (err) { 
       var errorMsg = 'Issue Submission Failed ! ' + err.statusText; 
       $('#result').removeClass('alert-success').addClass('alert-error').html(errorMsg).show(); 
      } 
     }); 
    } 

服務器端： -

沒什麼特別的電子郵件發送的服務器端做，只在附件更通用的方法進行處理。

 attachments: Attachments.map(function (f) { 
    return { 
     fileName: f.name, 
     filePath: f.path, 
     cid:  f.path 
    }; 
    }) 

而且這個代碼是從臨時文件夾刪除這些臨時文件附件寄出後非常有用，

/* Clean up the temporary files. */ 
    Attachments.forEach(function (f) { 
    fs.unlinkSync(f.path); 
    }); 

，這就是如何在電子郵件發送代碼被調用，使BodyParser（）和多（）都可以使用。

app.post('/api/contactus/', express.multipart(), api_calls.contactUs); 

Answer 2

$.ajax({  
    type: "POST", 
    url: '/admin/systemgoalssystemgoalupdate?format=html', 
    data: formdata, 
    success: function (data) { 
     console.log(data); 
    }, 
    dataType: "json" 
});