happy_ryo

2017.03.13

Vue.js でファイルをポストしたいとき

お久しぶりです、気を失っている間に iOS エンジニアではなくなっていた happy_ryo です。
意識を取り戻してからは Instagram と Twitter の API をガンガン叩きながら、Laravel と Vue.js たーのしー!している毎日です。

表題の通り、Vue.js で input タグを用いたファイルのアップロードをする方法をまとめておきます。
環境は Vue.js 2.0 以上、通信には axios を使用します。

input タグの type が file の場合、File に対して readonly 制約がついている関係で v-model で双方向バインディングを構築することが出来ないため、File inputs are read only. Use a v-on:change listener instead.という警告が表示され、値を正確に取得する事が出来ません。警告内でオススメされているように v-on:change で取得出来る event から File を取得し、FormData を利用してファイルを POST すると上手くいくので、ぼくはこの方法を使っています。

サンプル