使用Vue js上传图像时如何显示图像预览？

Question

我正在尝试在用户上传图像时显示预览图像。出于某种原因，当我将<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);
            },
        }

引导程序代码，此代码有效：

<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>