[blogging purpose] file upload vuejs component - js

Upload.vue

<script>
const BASE_URL = "[YOUR_PROJECT_URL]"

export default {
  name: 'FileUpload',
  
  directives: {
    uploader: {
      bind (el, binding, vnode) {
        el.addEventListener('change', e => {
          vnode.context.file = e.target.files[0]
        })
      }
    }
  },
  
  methods: {
    selectFile () {
      this.$refs.file.click()
    },
    
    uploadFile () {
      let formData = new FormData()
      formData.append('file', this.file)
      this.$http.post(BASE_URL + '/upload', formData, {
        before: request => {
          this.request = request
        }
      })
    }
  },
  
  data () {
    return {
      file: ''
    }
  }
}
</script>