vue上传文本文件后读取文本文件中的内容，并用js-yaml处理数据

vue上传文本文件后读取文本文件中的内容

使用场景：当需要上传文件时，我们前端需要读取出上传的文件中的内容，然后处理成一个json列表的格式，传给后端。
文本文件都可以读取（可以用.txt打开的文件），如 .excel，.yaml 文件等

读取文件

// 读取文本文件内容
 async readFile(file) {
   const reader = new FileReader()
   const promise = new Promise((resolve, reject) => {
     reader.onload = function () {
       resolve(reader.result)
     }
     reader.onerror = function (e) {
       reader.abort()
       reject(e)
     }
   })
   reader.readAsText(file, 'UTF-8') // 将文件读取为文本

   return promise
 }

上传文件后，处理文件中数据

async doImport() {
  if (!this.selectedFile) {
    this.$message.warning('请选择要导入的文件')
    return
  }
  let res = await this.readFile(this.selectedFile) // res 为文件中内容
}

js-yaml的使用：将yaml转为json

// 安装
npm i js-yaml
yarn add js-yaml
// 使用
import yaml from 'js-yaml'

try {
  // res 为 yaml 格式的内容（从文本文件中取得）
  const json = yaml.load(res) // 输出为 json 格式
  console.log(json)
} catch (e) {
  this.$message({ message: e.message, type: 'error', duration: 3000 })
}

补充

初识Blob和Filereader