図書館合金 Part 2

programming and books, music etc.

vuejsとFileAPIでファイルアップロードのプレビューまで

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 || 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 = '';
        }
    },
});

恐ろしく簡単に実現できる。すげえなあ。

モッピー!お金がたまるポイントサイト