title: POST file along with form data Vue + axios
body: <p>I have a method for Vuejs component:</p>
  
  <pre><code>async submit () {
          if (this.$refs.form.validate()) {
            let formData = new FormData()
            formData.append('userImage', this.avatarFile, this.avatarFile.name)
            this.avatarFile = formData
            try {
              let response = await this.$axios.post('http://localhost:3003/api/test.php', {
                avatar: this.avatarFile,
                name: this.name,
                gender: this.gender,
                dob: this.DOB,
              }, {
                headers: {
                  'Content-Type': 'multipart/form-data; boundary=' + formData._boundary
                }
              })
              if (response.status === 200 &amp;&amp; response.data.status === 'success') {
                console.log(this.response)
              }
            } catch (e) {
             console.log(e)
            }
          }
        }
  </code></pre>
  
  <p>And in <code>test.php</code>, I'm using <code>json_decode(file_get_contents("php://input"), TRUE);</code> to read data as <code>$_POST</code> variables.</p>
  
  <p>While I am able to read <code>name</code>, <code>gender</code> and <code>dob</code> correctly, I can't fetch <code>avatar</code> properly.</p>
  
  <p>Any solutions for the same?</p>
  
  <p>Note: I don't to append every variable as <code>formData.append(.., ..)</code> as I am planning to handle over 14 variables.</p>
  
  <p>Note for moderators: I didn't find any question where formData was being used along with other data objects.</p>