Allied ArchitectsAllied ArchitectsEngineer Blog

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

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 すると上手くいくので、ぼくはこの方法を使っています。

サンプル

happy_ryo
  • happy_ryo
  • えんじにあ
  • 営業→工場で作業→Word&Excel→Java→shellscript→Java→PHP→Python→Objective-C→Swift→PHP→JavaScript←イマココ 最近 Ruby はじめました。

RELATION ENTRY

Laravel の Eloquent の Factory について調べて見た

Laravel の Eloquent の...

2017/08/15 PHP

こんにちは、happy_ryo です。仕事で Laravel を書くことが増えた事により、Laravel に関して調べる機会がぼちぼちあるのですが、今回はテストの時にダミーのデータを持ったインスタンス作成するときに利用する Eloquent の Factory(以下 Factory) が、どのように...

続きを読む

AppCode と Xcode 、Swift 書くならどっち?

AppCode と Xcode 、Swi...

2015/12/10 言語

このエントリは iOS Advent Calendar 2015 の10日目のエントリです。昨日は ryotakodaira さんのUIButtonのスタイルの変更方法まとめでした。 以前、XCodeからappCodeへ乗り換える8つの理由というエントリを書いたのですがあれから随分経ったし、Swi...

続きを読む

happy_ryoの記事一覧へ

ページTOPへ