功能先于读取图像数据执行

Question

我正在使用 angular，并且我有一个可以进行图像输入的函数。

通过插入的图像，我删除它们的信息，如名称、大小...... 我的问题是，在上传图片时（我需要知道它的高度和宽度），上传功能比我从该图片获取信息的功能先执行。

作为一个问题，我得到一个未定义的宽度和高度。

上传功能先于image.onload :(

有人知道为什么吗？

Component.ts

  detectFiles(event) {

    if (files.length < 8) {
      for (let index = 0; index < files.length; index++) {

        this.items.push(item);
        const reader = new FileReader();
        reader.onload = (e: any) => {
          item.url = e.target.result;
          const image = new Image();
          image.src = e.target.result;
          image.onload = function () {
            item.sizeH = image.width;
          };

        }
        formData.append('file', files[index]);
        reader.readAsDataURL(files[index]);
      }
    }
  }

Answer 1

解释很简单。 Javascript 是一种顺序语言，但您无法确定在您的场景中哪个命令在堆栈中较早。

下面的代码只是说，当某个事件调用onload函数时，执行它。

      image.onload = function () {
        item.sizeH = image.width;
        item.sizeV = image.height;
        self.sizeH = item.sizeH;
        self.sizeV = item.sizeV;
      };

然后，在任何人调用该函数之前，您继续使用订阅进行上传。通常顺序命令会先执行。

如果您在 onload 函数中进行上传，则不会有问题。

      image.onload = function () {
        item.sizeH = image.width;
        item.sizeV = image.height;
        self.sizeH = item.sizeH;
        self.sizeV = item.sizeV;
        // upload logic here.
      };

Answer 2

我想问题出在

 reader.onload = (e: any) => {
      item.url = e.target.result;
      const image = new Image();
      image.src = e.target.result;
      image.onload = function () {
        item.sizeH = image.width;
        item.sizeV = image.height;
        self.sizeH = item.sizeH;
        self.sizeV = item.sizeV;
      };

如果有帮助，请尝试这样使用

reader.onload = () => {
 // Your code to be implemented
}