vue读取本地txt文件并显示到textarea中

可以使用HTML5的File API来读取本地的txt文件，并使用Vue.js将读取到的内容显示在textarea中。

首先，在Vue组件中定义一个data属性，用于存储读取到的文件内容：

data() {
  return {
    fileContent: ''
  }
}

然后，在模板中添加一个input元素，用于选择要读取的txt文件：

<input type="file" @change="readFile">

接着，在methods中定义readFile方法，使用FileReader对象来读取选中的文件：

methods: {
  readFile(event) {
    const file = event.target.files[0]
    const reader = new FileReader()
    reader.onload = () => {
      this.fileContent = reader.result
    }
    reader.readAsText(file)
  }
}

最后，在模板中添加一个textarea元素，将读取到的文件内容绑定到它的value属性中：

<textarea v-model="fileContent"></textarea>

完整的代码如下：

<template>
  <div>
    <input type="file" @change="readFile">
    <textarea v-model="fileContent"></textarea>
  </div>
</template>

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