URL.createObjectURL() オブジェクトURLを用いた画像アップロードのプレビュー画面

やりたいこと

RailsのActiveStorageを使って画像をアップロードしているが、画像を添付した時に添付した画像をプレビュー表示したかったのでJavascriptを用いて実装した。この時使用したURL.createObjectURL()について理解できていなかったので勉強のためアウトプット。

URL.createObjectURL()の説明

今回、プレビュー機能を実装するためURL.createObjectURL()を使用した。この機能について最初説明いたします。

URL.createObjectURL()の引数に渡すと、オブジェクトURLを取得できます。 形式はblob: /

以下が例になります。

blob:http://localhost:3000/84cced13-9e4c-4486-8049-9b9058b74099

この文字列(オブジェクトURL)はブラウザがURLとして解釈でき、ブラウザがオブジェクトURLを管理する仕組みに渡すことで、対応するデータを取得します。

   const $ImgFile = e.target.files[0];
    const data = window.URL.createObjectURL($ImgFile);

URL.createObjectURLを使ってブラウザのメモリに保存されたblobにアクセス可能な一意のURLを生成可能にする。 e.target.files[0]で取得したファイルの情報を定数fileに格納し、URL.createObjectURL(file)で取得した情報をオブジェクトURLに変換し、定数dataに格納します。

URLの参照行為、例えばimgタグのsrcにオブジェクトURLがセットされると、Blob URLストアから一致するものを検索してBlobオブジェクトから、データを取得します。

実装内容

  previewImg(e) {
    // // no-imgをdisplay:noneにする
    this.$NoImage.style.display = 'none';

    // 添付した画像にクラスやデータを付与
    const createImage = (data) => {
      const newImage = document.createElement('img'); 
      newImage.setAttribute('class', 'food_create_preview_img');
      // scrのデータをオブジェクトURLに
      newImage.setAttribute('src', data);
      // no-img画像に添付した画像を挿入する
      this.$image.appendChild(newImage);
    };

    // 続けて画像を添付する時、前回の画像を削除する
    const imageItem = this.$image.querySelector('img')
    if (imageItem){
      imageItem.remove();
    }

    // 取得した画像データを$ImgFileに代入
    const $ImgFile = e.target.files[0];
    const data = window.URL.createObjectURL($ImgFile);
    createImage(data);
    this.$image.onload = () => {
      URL.revokeObjectURL(data);
    };
  }