サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
uedatakeshi.hatenablog.com
ついでなので、ファイルを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
File APIなんてものが使えるようになってたのね。 IE10以上、ならいいんじゃないかなー。 で、こちらを参考に。 codepen.io <div id="app"> <div v-if="!image"> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-else> <img :src="image" /> <button @click="removeImage">Remove image</button> </div> </div> var app = new Vue({ el: '#app', data: { image: '' }, methods: { onFileChange: function(e){ var files = e.target.files ||
画像を登録してファイルアップロードという処理だが、登録画面からファイル一個だけ登録すればいい、という話はあまりなくて、なんだかんだで複数登録したいんだがどうすればいいのかという話になる。 なのでこういうのは結局複数登録に対応していないと話にならないのだ。 というわけでHTML側は、こんな感じで。 <div id="app"> <div> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-if="images"> <ol> <li v-for="(image, index) in images"> <h2>{{image.name}}</h2> <img :src="image.thumnail" /> <button @click="images.splice(index, 1
このページを最初にブックマークしてみませんか?
『uedatakeshi.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く