图片转base64遇到的一个问题?

Question

<input type="file" @change="getFile($event)">

getFile:function(e){
    var base64 = '';
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        //console.log(e.target.result); 能出来数据
        base64 = e.target.result;
    }
    console.log(base64); //为什么会为空？
}

问题写在注释中了

Answer 1

console.log(base64);
写到 onload 内部。
如果需要在 onload 执行成功后做一些额外的操作，可以使用回调函数的形式。
比如：

getFile:function(e, _fn){
    ···
    reader.onload = function(e){
        ···
        _fn();
    }
}

Answer 2

FileReader.onload是异步的，你console.log(base64)的时候onload还没执行呢

Answer 3

因为onload是异步的

Answer 4

要是强行同步推荐es6 promise

Answer 5

reader.onload 是一个异步函数，你应该：

reader.onload = function (e) {
    base64 = e.target.result;
    console.log(base64)
}