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

【问题标题】：get image size before upload in React在 React 中上传之前获取图像大小
【发布时间】：2017-09-02 02:39:54
【问题描述】：

预期的结果已经在香草here 中完成

明确地说，我不会使用alert()，我想将尺寸放在state 对象中。

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

【问题讨论】：

标签： javascript reactjs input

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：