Vuetify Загрузка файлов

Question

Я пытаюсь загрузить файл в Vue.js с помощью vuetify, а затем сохранить загруженный файл в моем объекте данных.

HTML:

<input id="file-upload" type="file" @change="onFileChange">

В моих методах, которые я вызываю:

onFileChange(e) {

  var files = e.target.files || e.dataTransfer.files;
  if (!files.length) {
    return;
  }   
  this.editedPerson.id_file = e.target.files[0].name;
},

Это работает на 100%.

Однако я хочу использовать компонент Vuetify:

<v-btn color="blue-grey" class="white--text" @click.native="openFileDialog">Upload<v-icon right dark>cloud_upload</v-icon></v-btn>

Я скрываю исходный тег ввода файла, нов этом компоненте v-btn я вызываю следующий метод:

openFileDialog() {
  document.getElementById('file-upload').click();
},

Поэтому, когда я нажимаю на компонент v-btn, он имитирует щелчок по скрытому тегу ввода файла, и я могу выбрать файл.

При изменении входного тега я все еще могу console.log загруженного файла, но

this.editedPerson.id_file = e.target.files[0].name;

больше не работает.

Есть ли какая-то причина, почему это происходит?

Answer 1

Этот следующий код прекрасно работает для меня.Я использовал Axois для HTTPClient, вы можете выбрать что-нибудь

<div id="app">
   <v-btn color="blue-grey" class="black--text" @click.native="openFileDialog">
    Upload
    <v-icon right dark> cloud_upload</v-icon>
   </v-btn>
   <input type="file" id="file-upload" style="display:none" @change="onFileChange">
</div> 


Vue.use(Vuetify);
var vm = new Vue({
    el: "#app",
    data: {
        formData: new FormData(),
    },
    methods: {
        openFileDialog() {
            document.getElementById('file-upload').click();
        },
        onFileChange(e) {
            var self = this;
            var files = e.target.files || e.dataTransfer.files;       
            if(files.length > 0){
                for(var i = 0; i< files.length; i++){
                    self.formData.append("file", files[i], files[i].name);
                }
            }   
        },
        uploadFile() {
            var self = this; 
            axios.post('URL', self.formData).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        },
    },

});