ファイル入力をするため<input type="file">を使用して、選択したファイル情報を任意で削除したいことはないでしょうか。
今回は、ファイル入力欄のファイル情報を削除する方法を紹介していきます。
検証環境
検証に使用した環境／ライブラリを次に記載します。
- Vue.js
- バージョン：2.6.12
ファイル情報の削除方法
ファイル情報を削除するには、次の方法があります。
- ファイル入力欄を削除して追加する。
- ファイル入力欄のvalue属性を未設定にする。
ファイル入力欄を削除して追加する
ファイル入力欄を削除して追加する場合は、v-ifを使用して入力欄を一度削除してから再作成することで、ファイル情報を削除することができます。
プログラム例
input要素にv-ifを設定します。
送信ボタンが押下されたときに、onSubmitメソッドを実行します。メソッドでは、input要素を削除するための情報を設定します。ただし、削除するための情報を設定してすぐに、再作成するための情報を設定してもファイル情報を削除することはできません。
これは、画面表示を構成するDOM（Document Object Model）が更新されていないとinput要素が削除されません。このため、DOMの更新完了したことを検知するnextTickの処理を使用して、input要素を再作成するための情報を設定をしています。
<template>
<div>
<input type="file" v-if="show" />
<div>
<button type="button" @click="onSubmit()">送信</button>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
show: true,
};
},
methods: {
onSubmit: function () {
this.show = false;
// this.show = false // この設定では再作成されない。
this.$nextTick(function () {
this.show = true;
});
},
},
};
</script>v-ifは、非表示になると要素を削除し、表示するときに要素を作成する動作になります。
ファイル入力欄のvalue属性を未設定にする
ファイル入力欄のvalue属性を未設定にする場合は、refを設定してvalueを未設定にすることで、ファイル情報を削除することができます。
プログラム例
input要素にrefを設定します。指定する名称は任意の値で問題ありません。例では、fileを指定しています。
送信ボタンが押下されたときに、onSubmitメソッドを実行します。メソッドでは、this.$refs.file.valueにnullを設定することで未設定にします。
<template>
<div>
<input type="file" ref="file" />
<div>
<button type="button" @click="onSubmit()">送信</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
};
},
methods: {
onSubmit: function () {
this.$refs.file.value = null;
},
},
};
</script>まとめ
Vue.jsでファイル入力欄のファイル情報を削除する方法を紹介しました。
参考情報
Vue.js公式サイト
