使用 multer 接收 FormData object 作为 node.js 服务器

Question

I have an HTML form with two buttons (along with other text input areas), and I have some front end javascript code to handle the submit. On the submit, I create a FormData object and store the file in it. Then I send that through an jquery ajax request to a node.js server. However, this is where the problem is - when I try to access the file in the server, the file is always undefined - i've tried accessing it with req.body, req.files, req.file but its always undefined. Is this a problem with the ajax request, or the way i'm receiving it?

upload file button:

<input id="element_3" name="element_3" class="element file required" accept="application/pdf" type="file"/>

submit button:

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>

handle submit:

$('#form_1039889').submit(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    var file = $('#element_3').get(0).files[0];
    var fd = new FormData();
    fd.append('pdf', file);
    $.ajax({
        url: '/addPdf',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(response) {
           //success TODO code
        }
    });
});

relevant server code:

app.post('/addPdf', [multer({dest: "./uploads/"}).single('avatar'), function(req, res) {
    console.log("file: " + req.file);
}]);

Answer 1

代替single（'avatar'）使用single（'pdf.file'），因为您为文件设置了pdf对象。

Answer 2

Name that we pass inside Single should match with form-data key. So Change.single('avatar') with.single('pdf'). So your node.js code will look like this:

app.post('/addPdf', [multer({dest: "./uploads/"}).single('pdf'), function(req, res) {
    console.log("file: " + req.file);
}]);