title: VueJS form data how to send image file with other data
body: <p>I want to send a images folder along with the other data. (name and openingHours);</p>
  
  <p>this is my vuejs code that I use to submit data to the backend</p>
  
  <pre><code>const formData = new FormData();
  
  formData.append("name", this.name);
  formData.append("openingHours", this.openingHours);
  formData.append("photos", this.selectedFile);
  
  await this.$http.post("spa", formData);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hHKgR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hHKgR.png" alt="enter image description here"></a></p>
  
  <p>Here my controller code</p>
  
  <pre><code>var multer = require('multer')
  var upload = multer({ dest: 'uploads/' })
  router.post('/', upload.array('photos', 10), async (req, res) =&gt; {
  
    console.log(req.file);
    console.log(req.body);
  
  
  });
  </code></pre>
  
  <p>Here the req.file is undefined and photos also come under the body and also this openingHours is not an array. I pass and array in the front-end.</p>
  
  <p><a href="https://i.stack.imgur.com/tWKFm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWKFm.png" alt="enter image description here"></a></p>
  
  <p>This is my body parser settings in the app.js</p>
  
  <pre><code>const bodyParser = require('body-parser');
  app.use(bodyParser.urlencoded({ extended: false }))
  app.use(bodyParser.json());
  </code></pre>
  
  <p>Can anybody tell me what's wrong with my code?</p>
  
  <p><strong>I want to pass openingHours as an JS array.</strong></p>
  
  <p><em>UPDATED</em>
  this is what I get if I console log openingHours in that method.
  <a href="https://i.stack.imgur.com/KIScD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KIScD.png" alt="enter image description here"></a></p>