example/upload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>vform example</title>
</head>
<body>
  <div id="app">
    <input type="file" name="file" @change="selectFile">
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.js"></script>
  <script src="https://cdn.rawgit.com/cretueusebiu/412715093d6e8980e7b176e9de663d97/raw/aea128d8d15d5f9f2d87892fb7d18b5f6953e952/objectToFormData.js"></script>
  <script src="https://unpkg.com/vform"></script>
  <!-- <script src="../dist/vform.umd.js"></script> -->

  <script>
    // import Form from 'vform'
    // import objectToFormData from 'object-to-formdata'

    const { Form } = window.vform
    const objectToFormData = window.objectToFormData

    new Vue({
      el: '#app',

      data () {
        return {
          form: new Form({
            foo: 'bar',
            file: null
          })
        }
      },

      methods: {
        selectFile (e) {
          const file = e.target.files[0]

          // Do some client side validation...

          this.form.file = file

          this.form.submit('post', '/upload', {
              // Transform form data to FormData
              transformRequest: [function (data, headers) {
                return objectToFormData(data)
              }],

              onUploadProgress: e => {
                // Do whatever you want with the progress event
                // console.log(e)
              }
            })
            .then(({ data }) => {
              // ...
            })
        }
      }
    })
  </script>
</body>
</html>