[Vuejs]-Vuetify File upload

by

1👍

✅

Use a the change event and a FileReader …

   <v-file-input chips multiple @change="addFiles()" 
          label="File(s)" v-model="file.files"></v-file-input>

   methods: {
        addFiles(){
            this.files.forEach((file, f) => {

                this.readers[f] = new FileReader();
                this.readers[f].onloadend = (e) => {

                    let fileData = this.readers[f].result
                    let imgRef = this.$refs.file[f]
                    imgRef.src = fileData
                    console.log(fileData)

                    // send to server here...
                }

                this.readers[f].readAsDataURL(this.files[f]);
            })
        },
    },

Demo: https://codeply.com/p/1K7sf12k0k

👤Carol Skelly

Leave a comment