【Vue.js】ドラッグ&ドロップでファイルアップロード機能を実装（プレビュー付き）

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-6">
        <div
          class="drag-area"
          @dragenter="drag = true"
          @dragover.prevent="drag = true"
          @drop.prevent="drop"
          @dragleave="dragleave()"
          :class="{ enter: drag }"
        >
          <div class="drag-title">ドラッグ&ドロップ</div>
        </div>
        <div class="drag-result pl-4">
          <div>ファイル名　: {{ file.name }}</div>
          <div>ファイルタイプ ： {{ file.type }}</div>
          <div>ファイスサイズ : {{ file.size }}</div>
          <div>プレビュー : <br>
            <img 
              v-show="file.preview" 
              :src="file.preview"
              style="width:150px;"
            >
          </div>
        </div>
       </v-row>
     </v-container>
  </v-app>
</div>

.drag-area{
  min-height: 200px;
  max-width: 500px;
  width: 100%;
  border: 2px dashed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.enter.drag-area {
  border: 2px dashed #1867c0;
  background: #d4e8ff;
}

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    drag: false,
    file: {
      name: "",
      type: "",
      size: "",
      preview: ""
    }
  },
  methods: {
    drop(event) {
      this.drag = false
      const files = event.dataTransfer.files
      this.file.name = files[0].name
      this.file.type = files[0].type
      this.file.size = files[0].size
      
      const reader = new FileReader()
      reader.onload = event => {
        this.file.preview = event.target.result
      }
      reader.readAsDataURL(files[0])
    },
    dragleave() {
      this.drag = false
      this.files = []
    }
  }
})

const reader = new FileReader()
reader.onload = event => {
  this.file.preview = event.target.result
}
reader.readAsDataURL(files[0])