お久しぶりです、気を失っている間に 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 すると上手くいくので、ぼくはこの方法を使っています。
サンプル
|
1 2 3 4 5 |
<div id="app"> // v-on:change でファイルの選択を検知する <input @change="selectedFile" type="file" name="file"> <button @click="upload" type="submit">アップロード</button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
(function(){ new Vue({ el: '#app', data: { uploadFile: null }, methods: { selectedFile: function(e) { // 選択された File の情報を保存しておく e.preventDefault(); let files = e.target.files; this.uploadFile = files[0]; }, upload: function() { // FormData を利用して File を POST する let formData = new FormData(); formData.append('yourFileKey', this.uploadFile); let config = { headers: { 'content-type': 'multipart/form-data' } }; axios .post('yourUploadUrl', formData, config) .then(function(response) { // response 処理 }) .catch(function(error) { // error 処理 }) } } }); })(); |
営業→工場で作業→Word&Excel→Java→shellscript→Java→PHP→Python→Objective-C→Swift→PHP→JavaScript→ベトナム 子会社CTO→本社CTO←イマココ
