以反应形式上传图像答案

【问题标题】：Uploading image in react form以反应形式上传图像
【发布时间】：2021-01-03 09:58:07
【问题描述】：

我正在尝试从输入类型 =“文件”上传图像。我使用了 Mozilla 文档中的示例：https://developer.mozilla.org/ru/docs/Web/API/FileReader/readAsDataURL 但它不起作用。我得到的就是：

这是代码：

HTML：

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

JavaScript：

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

【问题讨论】：

这是 Reactjs 吗？
This demo 可能会让你知道你做错了什么。
它的 javascript 但我会用它来反应
如果你想做出反应，它会容易得多。
@Yousaf 这是一个很好的解决方案！如何将您的答案标记为已接受？

标签： javascript reactjs

【解决方案1】：

在 Reactjs 中你可以这样做：

const App = () => {
  const [imageUrl, setImageUrl] = React.useState("");

  const handleChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      setImageUrl(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input
        type="file"
        name="image"
        onChange={handleChange}
        accept=".jpg,.png,.jpeg"
      />
      {imageUrl && <img src={imageUrl} alt="preview" />}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：