フロントエンドはテキストファイルをインポートして読み取ります

<テンプレート>

  <div>

    <el-input v-model = "fileName" style = "width：50％" />

    <input ref = "file" style = "display：none" type = "file" accept = "。json" @ change = "handleClick">

    <el-button style = "width：20％; margin-left：10px" type = "primary" @ click = "openFolderDialog">浏览</ el-button>

    <el-button style = "width：20％" type = "primary" @ click = "importFile">導入</ el-button>

  </ div>

</ template>

 

<スクリプト>

デフォルトのエクスポート{

  data（）{

    戻り値{

      ファイル名： ''、

      fileContent： ''

    }

  }、

  Mounted（）{

  }、

  メソッド：{

    openFolderDialog（）{

      this。$ refs.file.click（）

    }、

    handleClick（e）{

      constファイル= e.target.files

      const fileobj = files [0]

      this.fileName = fileobj.name

      var reader = new FileReader（）

      reader.readAsText（fileobj、 'utf-8'）

      const vm = this

      reader.onload = function（）{

        // console.log（ 'ファイル時間：'、reader.result）

        vm.fileContent = JSON.parse（reader.result）

      }

    }、

    インポートファイル（） {

      console.log（this.fileContent）

    }

  }

}

</ script>

 

<スタイル>

</ style>