Загрузка файла VueJS не принимает файл

Question

Я работаю над предварительным просмотром загружаемого файла с помощью VueJS, и у меня возникает проблема, при которой ... 1. - файл загружается пользователем 2. - предварительный просмотр отображается рядом с полем ввода 3. - поле ввода сейчасговорит, что изображение не загружено, хотя есть предварительный просмотр.

вот HTML:

<input type='file' accept='image/*' @change="onChange" name='file'  />
<img width='200' :src="uploadPreview" alt='preview' />

вот мой код vueJs:

    data: function() { return {
        uploadPreview : "",
        }
    },
    methods : {
        onChange(e) {
            if (! e.target.files.length) return;

            let file = e.target.files[0];

            let reader = new FileReader();

            reader.readAsDataURL(file);
            reader.onload = e => {
                this.uploadPreview = e.target.result; // if this line is commented out or just not present, the upload will work but the preview won't show since uploadPreview does not have a value set.
                };
            },
     }

есть что-то ста строка, которую я прокомментировал в коде там.
this.uploadPreview = e.target.result;
, если эта строка закомментирована или просто отсутствует, загрузка будет работать, но предварительный просмотр не будет отображаться, так как uploadPreview не имеет установленного значения.

Почему это не так?за работой?Почему значение поля ввода для файла сбрасывается после простой установки uploadPreview для некоторых двоичных данных изображения ???Еще раз ударился головой об этот стол.

Answer 1

Я предлагаю вам точки отладки.Попробуйте и дайте мне знать.

data: function() { return {
        uploadPreview : "ABCD",
        }
    },
    methods : {
        onChange(e) {
            if (! e.target.files.length) return;

            let file = e.target.files[0];

            let reader = new FileReader();

            reader.readAsDataURL(file);
            reader.onload = e => {
        console.log("FIRST SEE WHAT'S INSIDE THE RESULTS",e.target.result);
        console.log("SECOND MAKE SURE YOU CAN ACCESS",this.uploadPreview) // this should print ABCD
                this.uploadPreview = e.target.result; // if this line is commented out or just not present, the upload will work but the preview won't show since uploadPreview does not have a value set.
                };
            },
     }

и наконец

<img width='200' :src="uploadPreview" :alt='uploadPreview' />

(alt должен соответствовать данным изображения)