Загрузить файл Vuetify - PullRequest
Новая
       30

Загрузить файл Vuetify

0 голосов
/ 23 марта 2020

У меня есть форма, где я использую компонент Vuetify v-file-input: 

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

Мой объект данных выглядит следующим образом: 

 data: () => ({
    file: {
      files: null,
      directory: 0,
    }
 })

Когда я console.log данные формы files объект возвращает пустой объект. Как я могу получить данные файла для передачи их моему Laravel бэкэнду?

1 Ответ

1 голос
/ 23 марта 2020

Используйте событие change и 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]);
            })
        },
    },

Демонстрация: https://codeply.com/p/1K7sf12k0k

...