Upload Image with VueJS

image_upload.html

<!-- See: https://jsfiddle.net/edwinencomienda/eywraw8t/444118/ -->
<div id="app">
    <form @submit.prevent="onSubmit">
       <input type="file" @change="onFileChange">
       <button>Submit</button>
    </form>
</div>

<script>
  new Vue({
  el: "#app",
  data: {
    form: {
    	name: '',
     	image: ''
    }
  },
  methods: {
  	onFileChange (event) {
    	this.form.image = event.target.files[0]
    },
    onSubmit () {
   		const formData = new FormData
      for (let key in this.form) {
      	formData.set(key, this.form[key])
      }
      
      // formData submit as payload like axios
      // axios.post('example.com', formData)
    }
  }
})
</script>

<style>
  body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }

  #app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
  }

  li {
    margin: 8px 0;
  }

  h2 {
    font-weight: bold;
    margin-bottom: 15px;
  }

  del {
    color: rgba(0, 0, 0, 0.3);
  }
</style>