用inputr获取上传的txt文件内容

使用 `<input type="file">` 元素可以实现上传文件的功能。在选择文件后，我们可以通过 `FileReader` 对象来读取文件内容。以下是示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
    <pre>{{ fileContent }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: '',
    };
  },
  methods: {
    handleFileUpload() {
      const file = this.$refs.fileInput.files[0];
      if (!file.type.match('text/plain')) {
        return alert('只能上传txt文件');
      }
      const reader = new FileReader();
      reader.onload = () => {
        this.fileContent = reader.result; // 获取文件内容
      };
      reader.readAsText(file); // 以文本形式读取上传的文件
    },
  },
};
</script>

在这个示例中，我们使用 `ref` 属性引用了 `<input>` 元素，然后在 `handleFileUpload` 方法中获取选择的文件。如果文件类型不是 `txt`，我们就弹出一个提示框。

然后我们创建一个 `FileReader` 对象，监听它的 `onload` 事件，在事件处理函数中获取文件内容，并将其保存到组件的 `fileContent` 属性中。最后调用 `reader.readAsText()` 方法以文本形式读取上传的文件。

注意，由于安全限制，浏览器不能直接访问本地文件系统，需要用户手动选择文件后才能读取文件内容。因此我们需要将文件选择框放在页面中，并监听 `change` 事件来触发文件上传操作。