Para implementar essa funcionalidade em um aplicativo Vue, você pode criar um elemento de entrada de arquivo em seu modelo e adicionar um ouvinte de evento de alteração a ele que chama um método para lidar com a seleção de arquivo. Neste método, um novo objeto FileReader pode ser criado e usado para ler o conteúdo do arquivo selecionado. Após a leitura do arquivo, seu conteúdo pode ser analisado em uma matriz de matrizes usando a mesma lógica do trecho de código que você forneceu.
Aqui está um exemplo de implementação:
<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>Primeiro, ele seleciona o elemento de entrada do arquivo com ID "fileId" e recupera a lista de arquivos selecionados pelo usuário. Em seguida, crie um novo objeto FileReader e use-o para ler o conteúdo do primeiro arquivo na lista como um arquivo de texto codificado em UTF-8.
Após a leitura do arquivo, a função onload é chamada, recuperando o conteúdo do arquivo como uma string e contando o número de linhas do arquivo. Em seguida, ele inicializa uma matriz vazia chamada dataArr e percorre cada linha do arquivo (começando com a segunda linha) para extrair o primeiro valor separado por vírgula e convertê-lo em um número. Em seguida, insira esse número em um novo array e adicione-o a dataArr como um subarray.