Vuetifyのv-file-inputでファイルアップロード

Vuetifyのv-file-inputを使用して、ファイルをアップロードするサンプルです。 v-file-inputにデータバインディングし、紐付いた値（ファイル）をFormDataに追加して、アップロードします。

環境

• Vuetify 2.2.3

サンプル

<template>
  <form>
    <v-file-input v-model="file">
      <template v-slot:append-outer>
        <v-btn
          height="32"
          :disabled="!file"
          @click="upload"
        >Upload</v-btn>
      </template>
    </v-file-input>
  </form>
</template>

<script>
export default {
  data() {
    return {
      file: null,
    }
  },
  methods: {
    async upload() {
      let formData = new FormData()
      formData.append('file', this.file)

      const res = await axios.post('/file', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })

      console.log(res)
    },
  },
}
</script>