vue FileReader读取input type="file"图片（可拍照），并在img中显示

<template>
    <div>
        <input id="file" type="file" accept="image/" capture="camera">
        <img id="img" class="img" :src="pic" />
    </div>           
</template>

$('#file').change(function() {
    console.log('1234566788')
    var file = this.files[0];
    // 创建读取文件的对象
    var reader = new FileReader();
    //正式读取文件
    reader.readAsDataURL(file);
    console.log('reader', reader)
    reader.οnlοad = function(e) { //该事件在读取操作完成时触发
        console.log('reader.οnlοad', e)
    };
    reader.onabort = function(e) { //该事件在读取操作被中断时触发
        console.log('reader.onabort', e)
    };
    reader.onloadstart = function(e) { //该事件在读取操作开始时触发
        console.log('reader.onloadstart', e)
    };
    reader.onloadend = function(e) { //该事件在读取操作结束时（要么成功，要么失败）触发
        console.log('reader.onloadend', e)
        _self.pic = e.target.result;
    };
    reader.onprogress = function(e) { //该事件在读取Blob时触发
        console.log('reader.onprogress', e)
    };
    reader.onerror = function(e) { //该事件在读取操作发生错误时触发
        console.log('reader.onerror', e)
    }
}, )

一开始的时候从网上找的例子直接套用，发现不管怎么样reader.onload都不会触发，以为是自己打开的方式不对，试了很多次都没有成功。最后翻了fileReader的文档，并把所有的事件都打印出来了，发现：

onload没有触发，但是别onloadend触发了，于是用了onloadend返回的结果给pic赋值。。。

不知道为什么onload没有触发，还需要找找原因