Vue.js 拖放读取文本文件 - 完整示例和代码

您可以使用 HTML5 的拖放 API 来实现 Vue 拖放读取文本内容的功能。以下是一个示例代码：

<template>
  <div class='container'>
    <div class='dropzone' @dragover.prevent @drop='handleDrop'>
      Drag and drop a text file here
    </div>
    <div class='text'>
      {{ fileContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: ''
    };
  },
  methods: {
    handleDrop(event) {
      event.preventDefault();
      const file = event.dataTransfer.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        this.fileContent = reader.result;
      };
      reader.readAsText(file);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  border: 2px dashed black;
  font-size: 20px;
  text-align: center;
}

.text {
  margin-top: 20px;
  font-size: 16px;
  white-space: pre-wrap;
}
</style>

在上述示例中，我们创建了一个包含两个元素的容器。第一个元素是一个拖放区域，我们使用 @dragover.prevent 和 @drop 事件来防止浏览器默认的拖放行为，并在 handleDrop 方法中读取文件内容并将其赋值给 fileContent 变量。第二个元素是用来显示文件内容的区域，我们使用插值表达式 {{ fileContent }} 来显示 fileContent 变量中的文本内容。

需要注意的是，上述示例中只能读取文本文件，如果要读取其他类型的文件（如图片、视频等），需要使用相应的读取方法（如 readAsDataURL()）。