因为用的webkitGetAsEntry，所以只有用谷歌内核的才可以，Safari不行

先将基础的搭好再写js

template:

<template>
  <div class="hello" @dragover.prevent @drop="handleDrop">

  </div>
</template>

style:

<style scoped lang="scss">
.hello {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

JavaScript

<script  setup>
import { ref } from 'vue';
const dragUploadConfirmFile = ref([]);
function handleDrop(event) {
  event.preventDefault();
  if (event.dataTransfer) {
    let items = event.dataTransfer.items;
    for (let i = 0; i <= items.length - 1; i++) {
      let item = items[i];
      if (item.kind === "file") {
        let entry = item.webkitGetAsEntry();
        getFileFromEntryRecursively(entry);
      }
    }
  }

}
function submit() {
  console.log(dragUploadConfirmFile.value);
}
const timer = ref()
function toDragUploadConfirmFile(file) {
  dragUploadConfirmFile.value.push(file);
  if (timer.value) {
    clearTimeout(timer.value);
    timer.value = null;
  }
  timer.value = setTimeout(() => {
    submit()
  }, 700);
}
function getFileFromEntryRecursively(entry) {
  if (entry.isFile) {
    entry.file(function (file) {
      toDragUploadConfirmFile(file);
    });
  } else if (entry.isDirectory) {
    let dirReader = entry.createReader();
    dirReader.readEntries((entries: any) => {
      for (let i = 0; i <= entries.length - 1; i++) {
        getFileFromEntryRecursively(entries[i]);
      }
    })
  }
}
</script>