Javascript e、 target.result仅在两次或三次尝试后工作？

我正在尝试在客户端调整图像大小，然后将其发送到服务器。但图像并非总是正确地固定在用于调整图像大小的画布上

我已经发送了图像大小调整，但我需要发送它至少2次工作。 我在html中添加了

标签，以验证图像的数据，并且在第一次发送时可以看到数据不完整

这是我的html

函数ResizeImage（）{
var filesToUpload=document.getElementById（'imageFile'）.files；
var file=filesToUpload[0]；
console.log（“数据”）；
//创建一个图像
var img=document.createElement（“img”）；
//创建文件读取器
var reader=new FileReader（）；
//将图像加载到文件读取器后进行设置
reader.onload=函数（e）{
//在本部分中，e.target.result的工作原理很奇怪
img.src=e.target.result；
var canvas=document.createElement（“canvas”）；
//var canvas=$（“”，{“id”：“testing”}[0]；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
//var MAX_WIDTH=400；
//var最大高度=400；
var宽度=200；
var高度=200；
如果（img.宽度>img.高度）{
如果（img.width>width）{
高度*=高度/img.宽度；
//宽度=宽度；
}
}否则{
如果（图像高度>高度）{
宽度*=高度/img.高度；
//高度=高度；
}
}
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0，0，宽度，高度）；
var dataurl=canvas.toDataURL（“image/png”）；
log（dataurl）；
canvas.toBlob（（blob）=>{
var fd=新FormData（）；
fd.附加（“姓名”、“保罗”）；
fd.append（“图像”，blob）；
fd.追加（“键”，“×××××××××”）；
var xhr=new XMLHttpRequest（）；
xhr.open（“POST”http://localhost:5000/2");
xhr.send（fd）；
}，“图像/png”，1）
document.getElementById（'output'）.src=dataurl；
var para=document.createElement（“p”）；
var节点=document.createTextNode（dataurl）；
子节点（节点）段；
var元素=document.getElementById（“contendor”）；
要素.附件（第6段）；
}
//将文件加载到文件读取器中
reader.readAsDataURL（文件）；
}

Img.src是异步的

要验证这一点，请替换“img.src=e.target.result；”与

img.onload = function () { console.log('done')} 
img.src = e.target.result;
console.log('src')

如果在src之后运行done，则在尝试ctx.drawImage时，您知道映像尚未加载

要修复此问题，只需将所有调整大小的代码移到img.onload中。
您可能应该将大部分代码移到
img.onload中。
handler@Phil是的，这就是解决办法。非常感谢。