<template>
<input
@change="onChange"
accept="image/jpeg, image/png"
type="file"
id="file-input"
>
</template>
Vue.jsでファイルアップロードを実装していて、同じファイルを二度連続で選択するとうまく選択できないことがあります。
input要素が内部に持っているファイルの情報が変わっておらず、onChangeが発火していない為です。
やってることは同じですが、２通り対処方法を挙げます。
onChange (e: any) {
const files = e.target.files || e.dataTransfer.files
const fileInputElement: HTMLInputElement = <HTMLInputElement>document.getElementById(`input_${this.id}`)
fileInputElement.value = ''
}
<template>
<input
@change="onChange"
accept="image/jpeg, image/png"
type="file"
id="file-input"
@click="(e) => { e.target.value = '' }"
>
</template>