【Vue.js】ファイルアップロード時、前回と同じファイルがアップロードできない

事案

Vueでファイルを選択し、アップロードする処理を書きました。

下記はファイルを選択するコンポーネントのコードの例です。

<template>
  <label>
    ファイルを選択
    <input type="file" @change="onChange">
  </label>
</template>

ところが、これだとファイルを選択して、再度同じファイルを選び直した時に
アップロードの処理が走らなくなっていました。
これでは、例えばアップロードの処理が失敗した時などに、再度同じファイルを選べないので困ります。

アップロードができない理由としては、同じファイルを選択するとonChangeが発火していないためのようです。

解決策

valueを空にしてあげるonClickを追加すればOKでした。

<template>
  <label>
    ファイルを選択
    <input
      type="file"
      @change="onChange"
      @click="(e) => { e.target.value = '' }"
    >
  </label>
</template>

参考記事

input fileで同じファイルを連続で選ぶとonChangeが発火しない問題