title: How to send an file with $http.post in Vue.Js
body: <p>How can I send a file with vue.js?</p>
  
  <p>The following code is not working for me:</p>
  
  <pre><code>&lt;span title="Upload" class="badge badge-info"&gt;
              &lt;input type="file" id="file" name="file" @change="uploadData" class="archive" &gt; &lt;i id="iarchive" class="fa fa-upload"&gt;&lt;/i&gt; 
  &lt;/span&gt;
  </code></pre>
  
  <p>When I make <code>console.log(this.request.file)</code> I get <code>FILE [object File]</code>.</p>
  
  <p>Here is the .js:</p>
  
  <pre><code>  uploadData: function(e) {
                  var files = e.target.files[0];
  
  
                  this.request.action = 'upload';
                  this.request.file = files;
                  console.log("FILE "+this.request.file);
  
                  this.$http.post('data/getData.php', {
                  data: this.request,    
                  headers: {
                             'Content-Type': 'multipart/form-data'                   
                  }
                }
                 ).then(function(response) {
  
                      console.log("RESPONSE: "+response.body);
  
              }, function(response) {
  
                  alert("error");
              });
              return false;
          }
  </code></pre>
  
  <p>But in PHP, I can't get the file, the response is :<code>{} No properties</code>.</p>
  
  <p>PHP code:</p>
  
  <pre><code>$request = json_decode(file_get_contents('php://input')); 
  $req = $request-&gt;data;
  echo json_encode($req-&gt;file)
  </code></pre>