Как показать предварительный просмотр изображения при загрузке изображения с помощью Vue js? - PullRequest
Новая
       36

Как показать предварительный просмотр изображения при загрузке изображения с помощью Vue js?

0 голосов
/ 12 апреля 2020

Я пытаюсь показать изображение предварительного просмотра, когда пользователь загружает изображение. По какой-то причине мой код работает, когда я использую <input> с обычным Bootstrap классом form-control, но когда я использую Bootstrap - Vue <b-form-file>, я получаю ошибку: Error in render: "TypeError: Cannot read property 'name' of undefined"

Данные: 

data() {
            return {
                options: [
                    { text: "Full Time", value: "Full Time" },
                    { text: "Part Time", value: "Part Time" },
                ],
                profileData: {
                    photo: '',
                    employment_type: "Full Time",
                    date_of_birth: "",
                    experience: "",
                    skills: "",
                },

            };
        },

Мой метод: 

methods: {
            attachImage() {
                this.profileData.photo = this.$refs.profilePhoto.files[0];
                let reader = new FileReader();
                reader.addEventListener('load', function() {
                    this.$refs.profilePhotoDisplay.src = reader.result;
                }.bind(this), false);

                reader.readAsDataURL(this.profileData.photo);
            },
        }

Bootstrap Код, этот код работает: 

<div role="group" class="form-group">
                        <label for="photo" class="d-block">Upload Profile Photo (optional)</label>
                        <div v-if="profileData.photo.name">
                            <img src="" ref="profilePhotoDisplay" class="w-100px" />
                        </div>
                            <input
                                id="photo"
                                v-on:change="attachImage"
                                ref="profilePhoto"
                                type="file"
                                class="form-control"
                            >
                    </div>

Bootstrap - Vue Код, это дает мне ошибку: 

<div v-if="profileData.photo.name">
                        <img src="" ref="profilePhotoDisplay" width="140" />
                    </div>
                    <b-form-group label="Upload Profile Photo (optional)" label-for="image">
                        <b-form-file
                            id="photo"
                            v-on:change="attachImage"
                            ref="profilePhoto"
                            type="file"
                        ></b-form-file>
                    </b-form-group>
...