vue 导入文件

<span class="item" @click="chooseFile">导入文件</span>
<!-- 使用 accept 属性能够限定 文件选择的格式 -->
<input type="file" id="file" style="display: none;" accept=".csv" @change="fileInfo(getFileContent)">

chooseFile() {
  // 弹出文件选择框
  let input = document.getElementById('file')
  input.click()
},
fileInfo (callback) {
  // 获取input标签选择的文件,并选择第一条
  let resultFile = document.getElementById('file').files[0]
  // 若是文件存在
  if (resultFile) {
    // 获取文件信息
    this.file = resultFile
    // 获取文件名
    this.fileName = resultFile.name

    // 使用 FileReader 来读取文件
    let reader = new FileReader()

    // 读取纯文本文件,且编码格式为 utf-8
    reader.readAsText(resultFile, 'UTF-8')

    // 读取文件,会触发 onload 异步事件,可以使用回调函数 来获取最终的值.
    reader.onload = function (e) {
      var fileContent = e.target.result
      // 若为回调函数,则触发回调事件
      if (callback && (typeof callback === 'function')) {
        callback(fileContent)
      }
    }
  }
},
getFileContent (fileContent) {
  if (fileContent) {
    var logData = JSON.parse(fileContent);
    this.fileContent = fileContent
    this.graph.fromJSON(logData);
    alert('导入成功');
  }
},