如果你想使用async/await，你需要将事件 Package 在一个Promise构造函数中。
下面是一个简单的工作示例，选择一个图像文件，它会给你的大小。

function getFileSize(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      const image = new Image();
      image.onload = e => resolve([image.width, image.height]);
      image.onerror = e => reject(e);
      image.src = reader.result;
    }
    reader.onerror = e => reject(e);
    reader.readAsDataURL(file);
  });
}

document.querySelector('input').addEventListener('change', async e => {
  const span = document.querySelectorAll('span');
  const size = await getFileSize(e.target.files[0]);
  span[0].innerText = size[0];
  span[1].innerText = size[1];
});

span {
  font-weight: bold;
}

<input type="file" accept="image/png, image/gif, image/jpeg"/>

<div>width: <span></span></div>
<div>height: <span></span></div>

我将其分解为五个独立的函数：

1. loadImageFromFile~使用FileReader加载filename的Promise
2. loadImage~设置Image对象的src的Promise
3. loadImageFromFile~将上述两个函数合并到一个调用中
4. isValidSize~验证给定图像的宽度/高度
5. previewFile~用于侦听文件输入的事件处理程序

const previewFile = async () => {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const image = await loadImageFromFile(file);
  const isValid = isValidSize(image);
  console.log(`Image size valid: ${isValid }`);
  preview.src = image.src; // Update preview
};

const loadImageFromFile = async (file) => {
  const reader = await readFile(file);
  return loadImage(reader.result);
};

const readFile = async (file) =>
  new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.addEventListener('load', (e) => resolve(fileReader));
    fileReader.addEventListener('error', (e) => reject(e));
  });

const loadImage = async (imageData) =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.src = imageData;
    image.addEventListener('load', function (e) { resolve(this);  });
    image.addEventListener('error', function (e) { reject(e);  });
  });

const isValidSize = (image) => {
  const { height, width } = image;
  return width === 100 && height === 100;
};

<input type="file" onchange="previewFile()" /><br />
<img src="" height="100" alt="Image preview" />

如果您想要一个巨大的单片功能，您可以尝试：

• • 注：**此选项仅用于检查图像是否有效。如果要对图像执行更多操作，则需要再次加载图像。这就是第一个示例是更好选择的原因。它将验证与加载分开。

一个二个一个一个