js 读取文件内容

前端读取文件内容，可以是本地文件，也可以是服务器链接，现在把这两种方式记录一下：

一、读取本地文件，针对本地上传的文件，使用fileReader对文件进行读取，针对不同文件类型可以使用不同的读取方法

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

<script>
export default {
    data() {
        return {
            resultDataArray:[]
        };
    },
    methods: {
        handleFileChange(event){
            let file = event.target.files[0]
            let reader = new FileReader()
            // 这里针对不同的文件，使用不同的方法，我这里针对的是.txt文件的读取
            reader.readAsText(file,'UTF-8')
            reader.onload = (evt) =>{
                let fileStr = evt.target.result
                let count  = fileStr.trim().split('\n').length
                for(let i=2;i<count;i++){
                    //获取每行对应的字符串
                    let file_line = fileStr.split('\r\n')[i].split(',')[0]
                    //获取单行数据，返回数组
                    let fileData = file_line.split(/\s+/)
                    this.resultDataArray.push(fileData)
                }
            }
        }
    },
};
</script>

二、针对文件链接进行读取

import axios from "axios";
import {
  validatenull
} from "./validate";

export function getFileData(url = '') {
//判断URL是否为空，这里是封装好的判断是否为空的方法，可自行封装
  if (validatenull(url)) return null
//通过请求获取到文件的blob
  axios({
    method: 'get',
    url: url,
    responseType: 'blob'
  }).then(respon => {
    const blob = respon.data
    const read = new FileReader()
    read.readAsBinaryString(blob);
    read.onload = (res) => {
      const fileString = res.target.result
      const count = fileString.trim().split('\n').length
      let array = []
      for (let i = 2; i < count; i++) {
        const fileline = fileString.split('\r\n')[i].split(',')[0]
        let data = fileline.split(/\s+/)
        array.push(data)
      }
//这里是针对文件内容进行处理，可以根据自己文件内容自定义
      let temp = array.map(item => {
        return {
          latlng: [item[2], item[1]],
          time: `${item[9].replaceAll('/','-')} ${item[10]}`
        }
      })
//按照时间排序
      temp.sort(function (a, b) {
        return b.time > a.time ? -1 : 1
      })
      return temp;
    }
  })
}

以上是针对本地文件和远程文件在前端进行解析获取文件内容，仅仅是个人的一点点见解，如果有什么不对的，欢迎指正