title: VueJS upload image with additional data
body: <p>I am trying to upload image to the server and the same time to pass some additional data (in the same post request) using: <em>VueJS 2 (CLI 3), axios, multer, sharp and I have NodeJS with MongoDB in the backend.</em></p>
  
  <p>Front-end:</p>
  
  <pre><code>&lt;form @submit.prevent="onSubmit" enctype="multipart/form-data"&gt;
     &lt;div class="input"&gt;
        &lt;label for="name"&gt;Name: &lt;/label&gt;
          &lt;input
            type="text"
            id="name"
            v-model="name"&gt;
      &lt;/div&gt;
      &lt;div class="input"&gt;
          &lt;label for="last_name"&gt;Your last_name: &lt;/label&gt;
          &lt;input
                type="text"
                id="last_name"
                v-model="last_name"&gt;
       &lt;/div&gt;
       &lt;div class="input"&gt;
          &lt;label for="permalink"&gt;permalink&lt;/label&gt;
          &lt;input
                type="text"
                id="permalink"
                 v-model="permalink"&gt;
       &lt;/div&gt;
       &lt;div class="input"&gt;
         &lt;label for="price"&gt;price&lt;/label&gt;
         &lt;input
               type="text"
               id="price"
               v-model="price"&gt;
        &lt;/div&gt;
        &lt;div class="input"&gt;
          &lt;label for="photo"&gt;photo&lt;/label&gt;
          &lt;input
            style="display: none"
            type="file"
            id="photo"
            @change="onFileSelected"
            ref="fileInput"&gt;
          &lt;div @click="$refs.fileInput.click()"&gt;Pick file&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="submit"&gt;
            &lt;md-button type="submit" class="md-primary md-raised"&gt;Submit&lt;/md-button&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>VueJS methods:</p>
  
  <pre><code>import axios from 'axios'
  export default {
    data () {
      return {
        name: '',
        last_name: '',
        permalink: '',
        selectedFile: null,
        url: null,
        price: 0,
        second: false
      }
    },
    methods: {
      onFileSelected (event) {
        this.selectedFile = event.target.files[0]
        this.url = URL.createObjectURL(this.selectedFile)
      },
      onUpload () {
        const fd = new FormData()
        fd.append('image', this.selectedFile, this.selectedFile.name)
        axios.post('http...', fd, {
          onUploadProgress: uploadEvent =&gt; {
            console.log('Upload Progress ' + Math.round(uploadEvent.loaded / uploadEvent.total * 100) + ' %')
          }
        })
          .then(res =&gt; {
            console.log(res)
          })
      },
      onSubmit () {
        const fd = new FormData()          
        fd.append('image', this.selectedFile, this.selectedFile.name)
        fd.append('data', this.name, this.last_name)
  
        axios.post('http://localhost:7000/api/create-user', fd, {
          onUploadProgress: uploadEvent =&gt; {
            console.log('Upload Progress ' + Math.round(uploadEvent.loaded / uploadEvent.total * 100) + ' %')
          }
        })
          .then(res =&gt; {
            console.log(res)
            if (res.data === 'ok') {
              this.second = true
            }
          })
          .then(
            setTimeout(function () {
              this.second = false
              this.reset()
            }.bind(this), 2000)
          )
          .catch(error =&gt; console.log(error))
      }
    }
  }
  </code></pre>
  
  <p>NodeJS:</p>
  
  <pre><code>controller.postCreateUser = (req, res) =&gt; {
    const sharp = require('sharp');
    const fs = require('fs');
    const folderImg = 'backend/uploads/';
    console.log(JSON.stringify(req.body));
    console.log(req.file);
    res.send("ok");    
  };
  </code></pre>
  
  <p>The results of req.file is (which is good):</p>
  
  <pre><code>{ fieldname: 'image',
    originalname: 'musk.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: 'backend/uploads/original/',
    filename: 'musk-1545470459038.jpg',
    path: 'backend\\uploads\\original\\musk-1545470459038.jpg',
    size: 108787 }
  </code></pre>
  
  <p>The results of console.log(req.body) is</p>
  
  <pre><code>{"data":""}
  </code></pre>
  
  <p>The <strong>problem</strong> is here data has empty string and I don't receive any data. I need having the data to store to my database. How to do that?</p>
  
  <p>If something isn't very clear to you, ask me for more details.</p>