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

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

AppCode と Xcode 、Swi...

2015/12/10 言語

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

続きを読む

Core Image でチルトシフトのフィルタをかけてみる、風雲 Swift 編 (Advent Calendar 14日目)

Core Image でチルトシフトのフ...

2014/12/14 2014 Advent Calendar

アライドアーキテクツAdvent Calendar14日目の記事になります。 お久しぶりです、14日目担当の happy_ryo です。今回は、前回 Objective-C で書いた Core Image を利用したチルトシフトフィルターを Swift でリライトしてみました。 最初に書いておき...

続きを読む

happy_ryoの記事一覧へ

ページTOPへ