vue实现读取TXT文件内容并解析

要在Vue应用程序中实现此功能，可以在模板中创建一个文件输入元素，并为其添加一个change事件侦听器，该侦听器调用一个方法来处理文件选择。在此方法中，可以创建一个新的FileReader对象，并使用它来读取所选文件的内容。文件读取完成后，可以使用与您提供的代码片段中相同的逻辑将其内容解析为数组的数组。

以下是示例实现：

<template>
  <div>
    <input type="file" @change="handleFileSelect">
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataArr: []
    }
  },
  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsText(file, "UTF-8")
      reader.onload = (evt) => {
        const fileString = evt.target.result
        const count = fileString.trim().split('\n').length
        this.dataArr = []
        for (let index = 1; index < count; index++) {
          const fileline = fileString.split("\r\n")[index].split(",")[0]
          const filelineNumber = (fileline.split(/\s+/)).map(Number)
          this.dataArr.push(filelineNumber)
        }
      }
    }
  }
}
</script>

首先，它选择具有ID“fileId”的文件输入元素，并检索用户选择的文件列表。然后创建一个新的FileReader对象，并使用它将列表中的第一个文件的内容作为UTF-8编码的文本文件读取。

文件读取完成后，将调用onload函数，该函数将文件内容作为字符串检索，并计算文件中的行数。然后，它初始化一个名为dataArr的空数组，并循环遍历文件的每一行（从第二行开始），以提取第一个逗号分隔值并将其转换为数字。然后将此数字推入新数组中，并将其作为子数组添加到dataArr中。