Angular中图片上传时image.onload滞后导致宽高未定义问题

嗨，我来帮你拆解下这个问题的核心原因～

这个问题本质是JavaScript异步执行机制导致的，咱们一步步捋代码的执行顺序就清楚了：

1. 当你选择文件触发detectFiles后，进入循环处理每个文件：

   • 先创建item对象并把它加入items数组
   • 接着创建FileReader并定义它的onload回调（注意这个回调本身是异步执行的，不会阻塞后续代码）
   • 这时候你直接执行了formData.append('file', files[index]);——这是同步代码，会立刻执行
   • 然后调用reader.readAsDataURL(files[index])，触发FileReader的异步读取操作

2. 等FileReader完成读取后，才会进入它的onload回调：

   • 给item.url赋值
   • 创建Image实例并设置src，此时Image开始异步加载图片资源
   • 只有当图片完全加载完成后，image.onload回调才会执行，给item.sizeH赋值

你看，formData.append的执行时机比image.onload早太多了——前者在循环里同步执行，后者要等FileReader读取、Image加载两步异步操作完成后才会触发。这就导致当你把文件添加到formData准备上传时，item.sizeH还没被赋值，自然就是undefined了。

内容的提问来源于stack exchange，提问作者user11052170