在React上传之前获取图像大小

Question

所需的结果已在香草here

中完成

要说清楚，我不会使用alert()，我想将尺寸放在state对象中。

如何在OnChange()事件处理程序下的React中重新创建此代码？

Answer 1

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

说到这一点，作为一个React开发人员，你应该首先创建上传过程，让它在一个单独的类中工作。班级可以通过道具接受图像。然后，一旦它正常工作，您可以创建一个包含上传组件的高阶组件，或者更确切地说将上传组件作为参数接收并检查图像大小。此时，您可以返回Invalid组件或只处理图像并上传。

您可能想看一些关于React入门的教程。 这是一个很好的开始egghead.io

Answer 2

我有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]);
}