【Vue3】Vue3でファイルを読み込む

2021年7月14日

Vue3でファイルの読み込みを実装します。

ファイルを読み込む

初めにテンプレートのHTML部分を作成します。
@changeディレクティブでファイルを読み込んだ際に実行するメソッドを指定します。

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

次にアップロードされたファイルを処理するメソッドを作成します。
console.log()でファイルの情報を出力するだけのメソッドです。

<template>
  <div>
    <input type="file" @change="fileUpload" />
  </div>
</template>
<script>
export default {
  name: "myproject",
  setup() {
    const fileUpload = (inputFile) => {
      let fileObject = inputFile.target.files[0];
      console.log(fileObject);
    };
    return {
      fileUpload,
    };
  },
};
</script>

「ファイルを選択」からファイルを選択後に、ブラウザのデベロッパーツールを見るとファイルの情報が取得できていることが確認できます。

ファイルの内容を表示する

読み込んだファイルの内容を表示します。
<input type="file" />で読み込んだFileオブジェクトにアクセスするためにFileReaderクラスを使用します。

以下にスクリプトの部分のみ記載します。

<script>
import { reactive } from "vue";
export default {
  name: "myproject",
  setup() {
    const data = reactive({
      fileName: "",
      fileText: "",
    });
    const fileUpload = (inputFile) => {
      let fileObject = inputFile.target.files[0];
      data.fileName = fileObject.name;
      let fileReader = new FileReader();
      fileReader.readAsText(fileObject);
      fileReader.onload = () => {
        data.fileText = fileReader.result;
      };
    };
    return {
      data,
      fileUpload,
    };
  },
};
</script>

FileReader.readAsText()メソッドでファイルを読み込みますが、このメソッドは非同期実行のため、ファイルを全て読み取る前に次の処理へ移ってしまいます。
読み取り成功後にファイルの中身を取得するにはonloadイベントを使用します。
読み取り後にファイルの中身を取得するにはresultプロパティを使用します。