Javascript 在React中上载之前获取图像大小

预期结果已在香草中完成

为了清楚起见，我不会使用

alert（）

，我希望将维度放置在

状态

对象中

如何在

OnChange（）

事件处理程序下的React中重新创建此代码

---

---

React仍然是JavaScript，您在常规js中所做的一切都可以在React中完成。在较高的层次上，React只是帮助您创建更多模块化可重用代码的框架

话虽如此，作为React开发人员，您应该先创建上传过程，然后让它在单独的类中工作。该类可以通过其道具接受图像。然后，一旦工作正常，您就可以创建一个更高阶的组件来包装上载组件，或者更确切地说，将上载组件作为参数接收并检查图像大小。此时，您可以返回无效组件，或者只处理图像并上传

您可能想看一些关于React入门的教程。

---

这是一个很好的开始

我有一个

img

src

看起来像这样：

我能够用这样的代码解决这个问题

if (e.target.files && e.target.files[0]) {
  var img = document.createElement("img");
  this.state.backgroundImageFile = e.target.files[0];

  img.onload = function () {
    debugger;
    console.log(this.width + " " + this.height);
  });

  var reader = new FileReader();
    reader.onloadend = function (ended) {
    img.src = ended.target.result;
  }
reader.readAsDataURL(e.target.files[0]);
}