Nuxt.jsでファイルアップロード機能を実装する際にinputタグ周りでやっておくべきアレコレメモ

概要

定期的に一からファイルアップロード機能を実装するたびにref周りで凡ミスしている気がするので、Nuxt.js(Vue.js)でファイルアップロードを実装する時にアレコレを備忘録としてまとめます。

やること

• input タグに ref="fileInput" のような形でinputタグにバインドされたファイルを操作するための変数を用意する
• ref="fileInput" に指定した値と、APIにリクエストを送る際のFileオブジェクトは別の変数として定義する
• 選択したファイルの値をクリアする場合は、inputタグのrefの値とAPIにリクエストを送る際のFileオブジェクトの両方をクリアする

<label class="">
  <span>ファイルを選択</span>
  <input
    ref="fileInput"
    type="file"
    accept="image/*,.pdf"
    :disabled="loading"
    @change="onFileChange"
  />
</label>

setup() {
  // APIにリクエストするパラメータとなる変数
  const file = ref<File | null>(null);
  
  // inputタグに保持されているファイルをバインドするための変数
  const fileInput = ref<HTMLInputElement | null>(null);

  // inputタグをrefで参照するためのfileInputの値をクリアしないとファイルが保持され続けてしまう
  const removeFile = (): void => {

    if (fileInput.value) {
      // inputタグで保持しているファイル自体をクリア
      fileInput.value.value = "";
    }
    
    // APIにリクエストするための値をクリア
    file.value = null;
  };
  
  // changeイベントが発行された時に値をセットするのは、リクエスト
  const onFileChange = (e: Event): void => {
    const target = e.target as HTMLInputElement;

    if (!(target.files && target.files[0])) {
      return;
    }
　  
    // 中略：許可されたファイル形式かチェックする処理

    file.value = target.files[0];
  };
}