【Vue.js】リアクティブに画像プレビューする

#new FileReaderについて

アップロード画像を非同期に読み取ることができるオブジェクト

const reader = new FileReader();

#FileReaderでできること

読み込まれた画像情報をアップロード画像データに上書きする

reader.onload = (e) => {
  this.staff_image = e.target.result;
};

アップロード画像を読み込む

reader.readAsDataURL(this.staff_image);

• 読み取り操作が正常に完了されたら、result属性に格納されたデータを、アップロード画像データに上書きする
• アップロード画像を読み込ませた結果をresult属性に返している

#実践：アップロード画像をプレビューで表示させて、DBに保存する

###ポイント

• プレビュー画像と、DB保存画像の格納dataを分けて考える

###流れ

1. v-input-fileに、v-model属性をつけることで、アップロードファイルとdataオプションと連動させる
2. 画像がアップロードされたらimgaeUp関数が着火し、画像ファイル拡張子を使えるものに限定させる。この時、DBに保存する画像情報を格納しておく。
3. もし使えない画像拡張の場合は、errors変数にエラー文を格納すると共に画像情報を削除し、imageUp関数を強制終了させる
4. 特に問題ない場合、プレビュー画像用に画像情報をパースし、アップロード画像を表示させる判定に切り替える。

##tmplateタグ(pug形式)

v-img(v-if="image", :src="staff_image")
v-img(v-else, src="/images/default.png")

v-file-input(
  hide-input,                   // フォームを隠す
  prepend-icon="mdi-camera",    // ボタンアイコン 
  @change="imageUp()",          // アップロードされたら、着火する関数
  v-model="staff_image"         // アップロード画像と連動させる
)

##scriptタグ

data() {
  return {
    staff_image: "",     // アップロードファイルの格納場所
    image_name: "",      // DBに保存するアップロードファイル
    image: false,        // 表示するのは、デフォルト画像かアップロード画像かの判定
  };
},

imageUp() {

  // 画像ファイル拡張子の検証
  const type = this.staff_image.type;
  this.image_name = this.staff_image;    // DB保存用に、画像情報を格納しておく
  let errors = "";
  if (
    type !== "image/jpeg" &&
    type !== "image/gif" &&
    type !== "image/png" &&
    type !== "application/pdf"
  ) {
    errors +=
    ".jpg、.gif、.png、.pdfのいずれかのファイルのみ許可されています\n";
  }
  if (errors) {
    alert(errors);
    this.staff_image = "";
    this.image_name = "";
    this.image = false;
    return;                             // エラー処理の場合、imageUp関数を強制終了する
  }

  // アップロード画像をプレビューで表示させる
  const reader = new FileReader();
  reader.onload = (e) => {
    this.staff_image = e.target.result;
  };
  reader.readAsDataURL(this.staff_image);
  this.image = true;                         // アップロード画像の表示に切り替える
},