I am trying to post an array of multiple objects (2 strings, 1 date & 1 file) from Vue.3/Axios to A Nodejs server using Multer. However in the Nodejs Server when I console.log req.files and req.body they return

files - []

&

body - [Object: null prototype] { formData: '[object FormData]' }

How do I access my data from that object FormData.

Axios Post

async post(images) {
    var formData = new FormData();
    for (let i = 0; i < images.length; i  ) {
      let file = Array.from(images[i].file[0]);
      formData.append("file", file);
      formData.append("title", images[i].title);
      formData.append("project", images[i].project);
      formData.append("date", images[i].date);
    }
    var isValid = true;
    if (isValid) {
      console.log(
        await axios
          .post(
            `http://localhost:3080/api/image/post`,
            {
              formData,
            },
            {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            }
          )
          .then((res) => console.log(res))
          .catch((err) => ("Error Occured", err))
      );
    }
  }

Where images is a proxy containing an array with image objects holding:

date: "2022-06-10"
file: FileList {0: File, length: 1}
project: "Project Name"
title: "Test"

Multer is setup like so

const multer  = require('multer')
var storage = multer.diskStorage({
  destination: function (request, file, callback) {
      callback(null, './uploads/');
  },
  filename: function (request, file, callback) {
      callback(null, file.originalname)
  }
});
var upload = multer({ storage: storage });

app.post('/api/image/post', upload.array('file'), function (req, res, next)){
    console.log(req.body)
}

CodePudding user response：

remove the object property shorthand, use just formData:

await axios
  .post(
    `http://localhost:3080/api/image/post`,
     formData,
    {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })