问题:使用了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请求了,导致图片的值第一次获取到的值是空的,怎么解决?