FormData 在前端定义，在后端未定义

Question

I want to upload a picture on change and with formData and I believe it's grabbing the information on the front-end because I don't get undefined, but on my back-end it comes as undefined.

//THIS IS MY INPUT 
<input class="second-picture" type="file" name="filename" accept="image/gif, image/jpeg, image/png">

//DEFINING FORMDATA
var formData = new FormData();
formData.append('file', $('input.second-picture').prop('files')[0])

console.log(formData.get("file"))

// THIS CONSOLE GIVES ME: 
File {
  name: picture.jpg
  lastModified: xxx (date)
  size: 541092
  type: "image/jpeg"
  webkitRelativePath: ""
}

Here's the AJAX call and the back-end 'POST'

AJAX CALL - 

$.ajax({
    type: 'POST',
    url: `/api/Upload-second-picture`,
    crossDomain: true,
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data',
    mimeType: 'multipart/form-data',
    beforeSubmit : function() {

    },
    success : function(responseText, statusText, xhr, $form) {
        console.log('responseText', responseText)
    }
});

router.post('/Upload-second-picture', function(req, res) {
  let upload = multer({ storage: storage }).single('filename')
  upload(req, res, function (err) {
    let file = req.file
    console.log('this is my file', file) // RETURNS UNDEFINED
    if(file != undefined) {

      if (err) {
        return res.send("Error: file not uploaded 2", err)
      }
      return res.send(fileName)
    }
  })
})

How can I make the back end grab the information too?

Answer 1

您将文件放在file键中，在new FormData ，因此使用 multer 获取相同内容应该是很自然的：

let upload = multer({ storage: storage }).single('file');//instead of filename