VueJs输入预可视化，不会在FileReader监听器中更改我的数据

Question

我是VueJs的新手，目前正在设计一个图像选择器组件。我正在努力处理文件上传事件，因为我的可变属性并不想在事件监听器内更新。

模板代码的一部分：

<input @change="handleUpload" type="file" :name="imageName" />
<img :src="mutableImageString" alt="Image" class="img-responsive" />

逻辑：

handleUpload: function (e) {
    var reader = new FileReader();
    var file = e.target.files[0];

    reader.onload = function () {
        this.mutableImageString = file;
    }
    if (file) {
        reader.readAsDataURL(file);
    }
},

mutableImageString没有更新，但是如果我把它从onload事件中删除，它会更新但是值为空。任何的想法？谢谢！

PS：对不起我的英语不好：c