vuejsとFileAPIでファイルアップロードのプレビューまで
File APIなんてものが使えるようになってたのね。 IE10以上、ならいいんじゃないかなー。
で、こちらを参考に。
<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 || e.dataTransfer.files; if (!files.length) { return; } this.createImage(files[0]); }, createImage(file) { var image = new Image(); var reader = new FileReader(); var vm = this; reader.onload = function(e) { vm.image = e.target.result; }; reader.readAsDataURL(file); }, removeImage: function(e) { this.image = ''; } }, });
恐ろしく簡単に実現できる。すげえなあ。
Kindle Paperwhite 32GB、マンガモデル、Wi-Fi 、ブラック、キャンペーン情報つきモデル
- 出版社/メーカー: Amazon
- 発売日: 2016/10/21
- メディア: エレクトロニクス
- この商品を含むブログ (3件) を見る