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→ベトナム 子会社CTO→本社CTO←イマココ

RELATION ENTRY

Meetup 開催のお知らせ(1月5日18時から)

Meetup 開催のお知らせ(1月5日1...

2021/12/10 取り組み

アライドアーキテクツでは月1回程度のペースでエンジニア採用を目的とした Meetup を行っています。開催時期によって対象者が変わるのですが、今回の開催は2023年の4月入社になる方が対象です。(文理・学歴不問) 開催概要 開催日時:2022年1月5日 18:00~19:30頃まで 開催場所:オ...

続きを読む

New Relic CodeStream に触って見た。

New Relic CodeStream...

2021/12/9 インフラ

この記事はNew Relic Advent Calendar 2021の8日目の記事です。 今回は弊社で標準的にり利用されている PHPStorm (Jetbrains)の場合のインストールから、CodeStream の LP をパッと見ただけではわからない「こんな良いところがあるよ」というのを紹...

続きを読む

happy_ryoの記事一覧へ

ページTOPへ