FileReader with VueJS

0

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>
    
asked by anonymous 30.05.2018 / 17:54

0 answers