title: How can I upload image to server using axios
body: <p>I am trying to send a form along with an image. <strong>Note</strong>: I don't want to save the image in a database, I want to save it in a folder which I created on the server and just add a link of the image to the database.</p>
  <p>From the server side I know how to handle this, but I don't know how to do this from font-end. With other words, how can I send the image using axios to the server.</p>
  <pre><code>&lt;template&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;specdesc&quot; v-model=&quot;product.specdesc&quot; name=&quot;specdesc&quot; placeholder=&quot;Enter your name&quot;&gt;
      &lt;input type=&quot;file&quot;  name=&quot;image&quot; id=&quot;image&quot;  accept=&quot;image/*&quot; &gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-sm btn-primary&quot;@click.prevent=&quot;Submit()&quot;&gt; Submit&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
     name: 'Addproduct',
     data(){
          return{
              image: '',
              product:{
                  specdesc:'',
              },
          }
      },
      methods:{ 
        Submit(){
          var _this=this
  
          //  console.log(this.image)
          console.log(this.selectedCategory.category_name)
          var product = {
              specification:this.product.specdesc,
              imagename:this.image
          }
            
          this.$http.post('http://localhost:3000/api/companyproducts',product) 
          .then(function (response) {
              console.log(response.data);
          })
          .catch(function (error) {
              console.log(&quot;error.response&quot;);
          });
          }
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>Now my question is how can I upload a image as well as the input name using axios. Moreover I want to use the same method i.e <code>var product</code> to send.</p>