I'm trying to display an image when uploading, but I'm having difficulty, because when reader.onload
generates base64
the object was already rendered on screen, I tried to use vuex
, but it still did not work, somehow alternative?
<div class="metade" id="preview">
<div class="itemImg" @click="lightbox" v-for="item in $store.state.files">
<div class="img" :style="{background: 'url(${item.preview})'}">
<div class="transparencia"><i class="ivu-icon ivu-icon-eye"></i></div>
</div>
</div>
</div>
<script>
export default{
data(){
return{
files: []
}
},
methods: {
dragFileSelected(){
document.getElementById('imagem').click()
},
onFileSelected(e){
this.files = [...e.target.files]
//console.log(this.files)
this.files.map((imagem, index) => {
this.readURL(imagem, index)
})
//console.log(this.files)
this.$store.dispatch('setFiles', this.files)
//console.log(this.$store.state)
},
readURL(file, index){
const reader = new FileReader()
reader.onload = (e) => {
this.files[index].preview = e.target.result
}
reader.readAsDataURL(file)
},
lightbox(imagem){
const modal = '
<div class="shadow">
<div class="imagem"></div>
</div>
'
document.body.innerHTML += modal
}
}
}
</script>