さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
Build better software and get user feedback directly in GitHub, GitLab, and more. VueJS and Axios GitHub – axios/axios: Promise based HTTP client for the browser and node.js work beautifully together for making HTTP requests. However, uploading files with VueJS and Axios can be a little bit challenging since it requires uploading files through an AJAX type system. I’ll be honest, I hate doing file
お久しぶりです、気を失っている間に 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.という警告が表示され、値を正確に取得する事が出
ついでなので、ファイルをpostするところまで追加してみる。 <div id="app"> <div> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-if="image"> <h2>{{imgName}}</h2> <img :src="image" /> <button @click="removeImage">Remove image</button> <button @click="submitImage">Submit image</button> </div> </div> var app = new Vue({ el: '#app', data: { image: '', imgName: '', uploadFile: '' }, methods: { onF
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
