我是否滥用了我的 POST 请求？ 我一直收到 400/500（错误的请求）

Question

I have been working very hard on a Website for my final project in a course at my university. I am having difficulty with understanding why my $.ajax POST request is sending NULL over to my server, when it should ( AND USE TO IN THE PAST) send over the name of my file I have uploaded.

Here's the code for my client side

$('#upload-file').on('change', function (e) {
        let uploadname = e.target.files[0].name;
        console.log("ICS NAME "+ e.target.files[0].name);

        let icsFlag = false;
        let formData = new FormData();
        formData.append('uploadFile', e.target.files[0].name);
        console.log("FORM:" + formData.uploadname);
        let fileName = e.target.files[0].name;

            if (checkICS(e.target.files[0].name) == true) {
                $.ajax({
                    type: 'POST',            //Request type
                    url: '/upload',  //The server endpoint we are connecting to
                    data: formData,
                    processData: false,
                    contentType: false, 
                    success: function (data) {

(the code won't go into either the success or failure section I just get the 400 bad post error)

here is my server-side code (This is the same for everyone in the class to my understanding)

//Respond to POST requests that upload files to uploads/ directory
app.post('/upload', function(req, res) {
  console.log("PLEASE"+req.files);

  if(!req.files) {
    return res.status(400).send('No files were uploaded.');
  }

  let uploadFile = req.files.uploadFile;

  // Use the mv() method to place the file somewhere on your server
  uploadFile.mv('uploads/' + uploadFile.name, function(err) {
    if(err) {
      return res.status(500).send(err);
    }

    res.redirect('/');
  });
});

and here's a picture of my /upload endpoint in the network section of my debug panel ( I was told this may be helpful, something to do with the content-type?) debug-upload-endpoint

Answer 1

You aren't appending the actual file to FormData , only it's name. Then your server side uploader has no file object to work with

Change

formData.append('uploadFile', e.target.files[0].name);

To

formData.append('uploadFile', e.target.files[0]);