javascript - VueJs 实现图像预览并返回不正确的 url

Question

在vuejs我想从用户选择的图像中进行图像预览，以下代码工作正常，我可以选择图像，但不幸的是，在执行此操作后reader.readAsDataURL(this.avatar);，我返回了不正确的 url，http://localhost/fa/panel/true并且我404在console.

我显示此表单的当前 url 是框架http://localhost/fa/panel/user-profile支持的。Laravel

html图像和input标签

<img v-bind:src="image_preview" width="120" height="120" v-show="show_preview"/>
<input type="file" class="file-styled" name="avatar_path" @change="onFileChange">

vuejs代码：

import {mapGetters, mapMutations} from "vuex";

export default {
    data() {
        return {
            avatar: null,
            image_preview: null,
            show_preview: false,
        }
    },
    methods: {
        onFileChange(event) {
            this.avatar = event.target.files[0];
            let reader = new FileReader();
            reader.addEventListener("load", function () {
                console.log(reader.result) // return base-64 of image
                this.image_preview = true;
                this.show_preview = reader.result;
            }.bind(this), false);

            if (this.avatar) {
                if (/\.(jpe?g|png)$/i.test(this.avatar.name)) {
                    console.log(this.avatar); // result is object image
                    reader.readAsDataURL(this.avatar);
                }
            }
        }
    }
};

标签： javascriptlaravelvue.js