<div id="app" v-cloak>
<p>
<input type="file" accept="image/*" ref="myFile" @change="previewFile">
</p>
<img v-if="imgsrc" :src="imgsrc" class="imgpreview">
</div>
[v-cloak] {display: none}
.imgpreview {
max-width:500px;
max-height:500px;
}
Vue.config.productionTip = false;
Vue.config.devtools = false;
const app = new Vue({
el:'#app',
data: {
imgsrc:''
},
methods:{
previewFile() {
let file = this.$refs.myFile.files[0];
if(!file || file.type.indexOf('image/') === -1) return;
let reader = new FileReader();
reader.onload = e => {
this.imgsrc = e.target.result;
}
reader.readAsDataURL(file);
}
}
})
This Pen doesn't use any external CSS resources.