ajax的reader属性,js 中为什么ajax请求在文件加载完成(reader.onload)前先执行了?

问题:使用了bootstrap模态框进行表单提交,其中需要上传图片,点击提交的时候触发接口请求,代码如下:

html:

js:

var data;

function getimg() {

var reader = new FileReader();

var file = $("#uploadImg")[0].files[0];

if (file) {

reader.readAsDataURL(file);//加了log之后发现,代码执行到这里的时候ajax就已经请求完了,然后再执行的下面的reader.onload

reader.onload = async function (e) {

if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {

toastr.error('上传失败,请上传不大于2M的图片!');

} else {

data = reader.result;

return data;

}

};

}

}

function add_new_entry() {

var imgBase64 =getimg();

$.ajax({

cache: false,

type: "POST",

url: "/api/entry/",

data: {

logo: imgBase64,

},

async:false,

success: function (data) {

if (data.status == 201) {

toastr.success('提交数据成功');

}

toastr.success("");

}

});

}

问题出在了每次点击模态框进行表单提交的时候(已上传图片),代码执行到reader.onload时就先一步执行完ajax请求了,导致图片的值第一次获取到的值是空的,怎么解决?